vuex 状态保持

2021-01-10 17:03:49 阅读：259 来源： 互联网

标签：状态存储 storage state 保持 persist vuex

　　在开发 vue 项目的时候经常会用到 vuex 这个工具，它专门用于组件通信及状态存储等。但是在使用 vuex 的过程中也发现了一些不可避免的槽点，那就是状态保持。

　　通常当用户点击刷新或按下F5的时候那么通过 vuex 保存的数据将会在页面再次加载完毕之后丢失，如果此时页面上显示的内容依赖于 vuex 中的数据，那么相应内容将会加载不出来。为了解决这个问题今天给大家安利一个非常好用的关于 vuex 状态保持的插件——vuex-persist

　　它的实现原理是将数据备份到本地的 localStorage、sessionStorage 或 cookie 中，再在刷新页面之后从本地存储中取回数据，以此实现了状态保持这一功能。废话不多说，接下来向大家介绍它的具体使用方法。

安装依赖：

1 // npm
2 npm install --save vuex-persist
3 // yarn
4 yarn add vuex-persist

安装成功后在store/index.js 文件中进行如下配置：

引入插件：

1 // 引入 vuex-persist
2 import VuexPersistence from 'vuex-persist'

创建对象：

1 const vuexLocal = new VuexPersistence({
2     storage: window.sessionStorage
3 })

在 vuex 中引入

1 export default new Vuex.Store({
2   state: { ... },
3   mutations: { ... },
4   actions: { ... },
5   plugins: [vuexLocal.plugin]
6 })

　　完成以上操作后便实现了 vuex 持久化存储，即使刷新页面也不会造成数据丢失了。下面是关于 vuex-persist 属性的一些介绍

属性	type	描述
key	string	状态存储在storage中的键，默认值为：vuex
storage	Storage (Web API)	备份时使用的本地存储类型，如：localStorage、sessionStorage 或 cookie，默认值为：localStorage
saveState	function (key, state[, storage])	如果不使用存储，这个自定义函数将保存状态保存为持久性
restoreState	function (key[, storage]) => state	如果不使用存储，这个自定义函数处理从存储中检索状态
reducer	function (state) => object	自定义需要持久化的state，如不配置，则默认对整个 vuex 内的模块进行持久化

　　传送门：https://github.com/championswimmer/vuex-persist

标签：状态,存储,storage,state,保持,persist,vuex
来源： https://www.cnblogs.com/fogfinch/p/14258524.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vuex 状态保持