原因：VUEX数据一般是放在计算属性computed中，但是刷新页面VUEX中的数据没有更改，即不触发compute。但是VUEX的取出来的数据是缓存在页面的，因此，造成刷新页面，数据丢失的现象。
解决方法（不唯一，但钟爱）：
原理：state与localStorage的值相通。state响应时时变更，而localStorage则是缓存的目的。
具体操作如下：
在对state赋值的时候，记得放入localStorage
在最大的父组件中（涉及业务场景，常规来讲最大的父组件是layout，也就是放置导航栏，菜单，内容的vue文件）的created函数中使用this.$store.commit("loadAll");
loadAll主要的内容是，将所有必要的state中的值从localStorage中取出，再赋值给state中相对应的值。如下图部分所示。
其中，如何实现state与localStorage的值相通，有一个小示例供参考（很好看的哈(✪ω✪)）。
set_token(state, token) {
state.userToken = token
localStorage.userToken = token
},
网友评论