解决uni-app使用vuex刷新后数据失效

vuex的数据是可以响应式更新，但是刷新数据就会失效。
缓存的数据刷新后不会丢失，但是不会响应式更新。
所以可以利用二者优劣势相结合解决vuex刷新后数据丢失

思路：
在存vuex数据的时候顺便存进缓存里面，然后在应用刷新的时候获取缓存存进vuex，这样缓存和vuex相结合可以方便项目数据存储

1.在把数据存进vuex的时候就设置缓存

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        hasLogin: false,
        userinfo: {},
    },
    mutations: {
        // 登录
        login(state,res) {
            state.hasLogin = true
            state.userinfo = res
            uni.setStorage({
                key: 'userinfo',
                data: res
            })
            console.log(state.userinfo)
            console.log(state.hasLogin)
        }
    }
})

export default store

2.获取用户信息时调用vuex方法存数据

getUserData() {
        uni.request({
            url: this.apiUrl + 'small/index/indexme', 
            data: {
                openid: uni.getStorageSync('openid')
            },
            method: 'POST',
            success: (res) => {
                if(res.data.status == 1) {
                    console.log(res.data)
                    store.commit('login', res.data.user) // vuex的方法
                } else {
                    uni.showToast({
                        title: res.data.msg,
                        duration: 2000
                    })
                }
            }
        })
    },

3.在应用刷新时获取缓存存进vuex

<script>
    import { mapState, mapMutations} from 'vuex'
    export default {
        onLaunch: function() {
            console.log('App Launch')
            let openid = uni.getStorageSync('userinfo').openid // 判断有没有openid，有则说明登录过了，重新把缓存存进vuex
            if (openid) {
                uni.getStorage({
                    key: 'userinfo',
                    success: (res) => {
                        this.login(res.data)
                    }
                })
            }
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        },
        methods: {
            ...mapMutations(['login']),
        }
    }
</script>

<style>
    /*每个页面公共css */
    @import url("./static/iconfont/iconfont.css");
html {
    background-color: #f5f5fd;
}
</style>

这样刷新，vuex的数据也不会失效