vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。
vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。
这时,vuex-persistedstate派上用场了:
原理:
将vuex的state存在localStorage或sessionStorage或cookie中一份
刷新页面的一瞬间,vuex数据消失,vuex回去sessionStorage中哪会数据,变相的实现了数据刷新不丢失~
使用方法:
安装:
npm install vuex-persistedstate --save引入及配置:
在store下的index.js中
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState()] })想要存储到sessionStorage,配置如下:
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage })] })想使用cookie或localStorage同理
vuex-persistedstate默认持久化所有state,指定需要持久化的state,配置如下:
import createPersistedState from "vuex-persistedstate" const store = new Vuex.Store({ // ... plugins: [createPersistedState({ storage: window.sessionStorage, reducer(val) { return { // 只储存state中的user user: val.user } } })]此刻的val 对应store/modules文件夹下几个js文件存储的内容,也就是stor/index中import的9个模块,希望哪一部分的数据持久存储,将数据的名字在此配置就可以,目前我只想持久化存储user模块的数据。文件夹目录如下:
注意:如果此刻想配置多个选项,将plugins写成一个一维数组,不然会报错。
import createPersistedState from "vuex-persistedstate" import createLogger from 'vuex/dist/logger' // 判断环境 vuex提示生产环境中不使用 const debug = process.env.NODE_ENV !== 'production' const createPersisted = createPersistedState({ storage: window.sessionStorage }) export default new Vuex.Store({ // ... plugins: debug ? [createLogger(), createPersisted] : [createPersisted] })此外,不使用vuex-persistedstat,明白了原理自己也能简单实现:
1.工具代码
var ctool = { setObj: function (key, obj) { obj = JSON.stringify(obj); localStorage.setItem(key, obj); }, getObj: function (key) { var obj = JSON.parse(localStorage.getItem(key)); return obj; }, }2.在main.js中写刷新绑定事件
window.addEventListener("beforeunload",()=>{ console.log('refresh'); ctool.setObj('store',store.state); })代码直接写在new Vue下面即可。
3.在root.vue的create方法中写恢复代码
created() { if(ctool.getObj('store')){ this.$store.replaceState(Object.assign({}, this.$store.state,ctool.getObj('store'))); ctool.setObj('store',null); } }这里为了避免出现异常错误,在恢复缓存后,置空缓存。