解決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的數據也不會失效