vuex中的值重置的原因
在完成项目的时候 , 要根据 login
的状态来显示相应的组件 , 一开始很自然的想到把 login
放在sessionStorage
中 , 但是放在里面的数据不是响应式的 , 不能及时的更新一些数据 , 然后又想到了放在vuex
中 , 但是又遇到了一刷新其中的值就重置了 , 因为vuex的数据是存储在浏览器的内存中的 , 页面刷新就会重置
解决方式一: 本地存储 + vuex
初始化login里面的值的时候 , 从sessionStorage 里面拿
state: {
login:window.sessionStorage.getItem('login')||false
},
只是commit
的时候要跟上window.sessionStorage.setItem
]
this.$store.commit("changeLogin",false);
this.login = this.$store.state.isLogin
window.sessionStorage.setItem('login',false)
解决方式二: 插件vuex-persistedstate
原理和上面的一样 , 只是不用在commit的时候sessionStorage
安装
npm install vuex-persistedstate --save
引入
plugins要是一个一维数组不然会解析错误
import createPersistedState from "vuex-persistedstate"
conststore =newVuex.Store({
// ...
plugins: [createPersistedState({
storage:window.sessionStorage //想要储存到sessionStorage 就设置这个
})]
})