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