数据持久化 , vuex中的值怎么永久保存

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 就设置这个
	})]
 
})