vuex如何实现数据持久化,vuex持久化存储原理
本文主要介绍了vueX的持久性在VUE中的应用，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
vuex持久性总结
vuex持久化
Vuex:刷新浏览器，vuex中的状态会再次变为初始状态。
解决办法：
使用vuex-persistedstate插件(实际上，它自动存在于本地存储中)
安装NPM I-S vuex-持续状态
以及配置介绍：在index.js下存储
从“vue”导入Vue
从“vuex”导入Vuex
//简介
从“vuex-persistedstate”导入persistedState
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{
num: null，
名称：空
},
突变：{
getNum(state，val) {
state.num=瓦尔
},
getName(state，val) {
状态.名称=val
}
},
//配置
插件：[
持续状态({
//默认情况下使用localStorage来固化数据，也可以使用sessionStorage，配置相同。
storage: window.localStorage，
减速器(val) {
返回{
//只存储状态中的值
编号：val.num，
名称：val.name
}
}
})
]
})
我在Home组件的vuex中给state变量赋值。
已创建(){
这个。$store.commit(getNum ，3)
这个。$store.commit(getName ， Hugh )
},
在h组件中引用
模板
差异
{{$store.state.num}}
{{$store.state.name}}
/div
/模板
这样，刷新H组件时，$store.state中的变量不会改变，而是自动存储在本地存储中。
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。