Vuex持久化,vuex持久化存储原理
当vuex被刷新时，存储在其中的状态将被浏览器释放。因为我们的状态都是存储在内存中的，页面一刷新状态中的数据就会被重置，这就涉及到vue数据的持久化问题。本文主要介绍vuex数据持久化的两种实现方案，有需要的可以参考一下。
目录
业务需求：
方案1:vuex-persisted状态方案2:vuex-persisted的概要
业务需求：
在基于vue开发SPA项目时，为了解决页面刷新后数据丢失的问题，我们通常会将数据存储在localstorage或者sessionstorage中；当需要对数据进行全局处理和统一管理时，我们也会使用Vue提供的vuex对数据进行统一管理。与localstorage或sessionstorage相比，vuex存储数据更安全。同时，vuex也有一些弊端。页面刷新时，vuex中存储在state中的数据会同时更新，而存储在vuex中的数据是无法持久化的，所以需要对其进行监控，以维护存储在vuex中的数据状态的持久性。
为了解决vuex中存储的数据在页面刷新后状态无法持久化的问题，我采用的解决方案是使用第三方插件工具实现vuex数据的持久化存储，解决页面刷新后数据更新的问题。
方案一：vuex-persistedstate
安装插件
纱线添加vuex-持续状态
//或者
npm安装-保存vuex-持久状态
施用方式
从“Vuex”导入Vuex；
//引入插件
从“vuex-persistedstate”导入createPersistedState
vue . use(Vuex)；
const state={ }；
const突变={ }；
常量操作={ }；
const store=new Vuex。商店({
状态，
突变，
行动，
/* vuex数据持久性配置*/
插件：[
createPersistedState({
//存储方法：localStorage、sessionStorage、cookies
存储：window.sessionStorage，
//存储键的键值
关键字：“存储”，
呈现(状态){
//要存储的数据：这个项目使用es6扩展操作符来存储state中的所有数据。
返回{.state }；
}
})
]
});
导出默认存储；
vuex中模块数据的持久存储
/* module.js */
导出常量数据存储={
状态：{
数据：[]
}
}
/* store.js */
从“”导入{数据存储}。/模块
const dataState=createPersistedState({
路径：[数据]
});
导出新的Vuex。商店({
模块：{
数据存储
},
插件：[数据状态]
});
注意事项：
Storage为存储模式，可选值为localStorage、sessionStorage和cookies；
LocalStorage和sessionStorage可以用上面的代码编写。如果你想用cookies存储数据，你需要另一种书写方法。
Render接收一个函数，返回值是一个对象；返回对象中的键-值对不仅仅是要持久化的数据；
如果要持久存储部分数据，应该将数据按键：值键：值对存储在返回对象中，render函数中的参数都是状态对象。
方案二：vuex-persist
安装插件
纱线添加vuex-persist
//或者
npm安装-保存vuex-持久化
施用方式
从“Vuex”导入Vuex；
//引入插件
从“vuex-persist”导入VuexPersistence
vue . use(Vuex)；
//初始化
常量状态={
用户名：“管理员”
};
const突变={ }；
常量操作={ }；
//创建一个实例
const vuexPersisted=new VuexPersistence({
存储：window.sessionStorage，
render:state=({
用户名：状态.用户名
//或者
.状态
})
});
const store=new Vuex。商店({
状态，
行动，
突变，
//数据持久性设置
插件：[vuexPersisted.plugins]
});
导出默认存储；
属性方法
属性值
数据类型
描述
键
线
在存储器中存储状态的键_Default: vuex_
仓库
存储(Web API)
localStorage、sessionStorage、local feed或您的自定义存储对象。必须实现getItem、setItem、clear等。Default: window.localStorage
保存状态
函数(键、状态[、存储])
如果不使用存储，这个自定义函数处理保存状态到持久性
还原剂
功能（状态)=对象
状态还原器。将状态减少到只有那些您想要保存的值。默认情况下，保存整个状态
过滤器
函数（突变)=布尔型
突变过滤器。查看突变类型，只为那些您希望为其触发持久化写的对象返回没错。对于所有突变，默认值返回真实的
模块
字符串[]
您想要持久化的模块列表。(如果您想使用这个，请不要编写自己的缩减器)
异步存储
布尔型
表示商店是否使用承诺（如本地馈送)或不使用（当起诉类似本地馈送的东西时，您必须将此设置为true)Default: false
支持循环
布尔型
表示状态本身是否有任何循环引用(state.x===state)Default: false
总结
上述两种方案都可以实现状态管理数据持久化存储。方案一是我在实际开发过程中用到的，方案二是在开源代码库上看到的，综合来说，两者都可以时间最终的需求，而且都有对应的案例演示可以参考。相比来说方案一在开源代码库上的开始数要高于方案二。
请结合实际情况选择符合自己的方案！
到此这篇关于状态管理数据持久化的两种实现方案的文章就介绍到这了，更多相关状态管理数据持久化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。