详解vuex持久化插件解决浏览器刷新数据消失问题
众所周知，vuex的一个全局状态管理的插件，但是在浏览器刷新的时候，内存中的state会释放，通常的解决办法就是用本地存储的方式保存数据，然后再vuex初始化的时候再赋值给state，手动存再手动取会觉得很麻烦，这个时候就可以使用vuex的插件vuex-solidification
插件地址:vuex-solidification,欢迎star
插件原理
vuex有一个hook方法：store.subscribe((mutation,state)=>{})每次在mutation方法执行完之后都会调用这个回调函数，返回执行完毕之后的state
使用方法
安装
npminstall--savevuex-solidification
引入及配置
importVuefrom'vue'
importVuexfrom'vuex'
importcountfrom'./count/index.js';
importcreatePersistedStatefrom'vuex-solidification';
Vue.use(Vuex);
conststore=newVuex.Store({
state:{
count:{
value:0,
num:1
},
pos:1
}
plugins:[//默认存储所有state数据到localstorage
createPersistedState()
]
});
插件参数说明
createPersistedState({options}):Function
options里面可以有:
key:String存储到localStorage,sessionStorage中对象的key，默认为vuex
local:Object和session:Object,分别代表localStorage的配置和sessionStorage的配置
local和session里面可以有:include:Array和exclude:Array
配置例子
createPersistedState({
local:{
include:['count.value']
}
})
/*
hook钩子触发之后，localstorage里面存储的对象为:
{
count:{
value:0,
}
}
*/
createPersistedState({
local:{
exclude:['count.value']
}
})
/*
hook钩子触发之后，localstorage里面存储的对象为:
{
count:{
num:1
},
pos:1
}
*/
createPersistedState({
session:{
include:['count.value']
}
})
/*
hook钩子触发之后，sessionstorage里面存储的对象为:
{
count:{
value:0,
}
}
*/
createPersistedState({
session:{
exclude:['count.value']
}
})
/*
hook钩子触发之后，sessionstorage里面存储的对象为:
{
count:{
num:1
},
pos:1
}
*/
createPersistedState({
session:{
include:['count']
},
local:{
include:['pos']
}
})
/*
hook钩子触发之后，
sessionstorage里面存储的对象为:
{
count:{
value:0,
num:1
},
}
sessionstorage里面存储的对象为:
{
pos:0
}
*/
代码例子
CheckouttheexampleonCodeSandbox.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。