uniapp使用computed和store遇坑

1.用户登录后存储用户信息到 uni.setStorageSync(userInfo)
2.在 vuex 中 state 中写方法

state: {
    userInfo: () => Storage.getUserInfo()
},
getters: {
    getUserInfo(state) {
        return state.userInfo()
    },
},
mutations: {
    setUserInfo(state, data) {
        state.userInfo = () => data
    },
},
actions: {
    setUserInfo(context, data) {
        context.commit('setUserInfo', data)
    }
}

试探过的无效方法：

getters: {
    getUserInfo(state) {
        return Storage.getUserInfo()
    }
},

3.个人中心页面 user-center.vue 是 tabbar.vue 的子组件页面，在 user-center.vue 中的 computed 中直接使用 this.$Storage.getUserInfo() 方法 无法及时获取数据更新
遂不得已而采用vuex机制来保证页面数据及时更新

computed: {
    syncUserInfo: function() {
        return this.$store.getters.getUserInfo || {}
    }
},

以上方法，只更新 Storage.getUserInfo() 数据，state变量是不会同步渲染更新的，必须调用this.$store.commit('setUserInfo', userInfo)来更新用户信息后才会全局更新
4.vuex是非持久化数据，所以
（1）通过 uni.setStorageSync(userInfo) 来做数据持久化
（2）通过vuex机制来做数据的全局同步更新
（3）两者结合实现App全局变量数据更新
5.解决了以下几个问题
（1）诸如用户信息、用户财务信息等App全局变量的数据一致性
（2）避免了在不同页面频繁请求同一接口获取用户信息
（3）在用户登录时获取用户信息后提前渲染用户信息页面，增强用户前端体验