vuex状态持久化_DIY 一个 Vuex 持久化插件

在做 Vue 相关项目的时候，总会遇到因为页面刷新导致 Store 内容丢失的情况。复杂的项目往往涉及大量的状态需要管理，如果仅因为一次刷新就需要全部重新获取，代价也未免太大了。

那么我们能不能对这些状态进行本地的持久化呢？答案是可以的，社区里也提供了不少的解决方案，如 vuex-persistedstate， vuex-localstorage 等插件，这些插件都提供了相对完善的功能。当然除了直接使用第三方插件以外，我们自己来 DIY 一个也是非常容易的。

这个持久化插件主要有 2 个功能：

1. 能够选择需要被持久化的数据。

2. 能够从本地读取持久化数据并更新至 Store。

接下来我们会从上述两个功能点出发，完成一个 Vuex 持久化插件。

Gist地址：https://gist.github.com/jrainlau/36ba8bb88f6940316044d3c35f5a370e在线体验地址：https://codepen.io/jrainlau/pen/GLJpWE

一、学习写一个 Vuex 插件

引用Vuex 官网 的例子：

Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，它接收 store 作为唯一参数：

constmyPlugin=store=>{ // 当 store 初始化后调用store.subscribe((mutation,state)=>{ // 每次 mutation 之后调用// mutation 的格式为 { type, payload }})}然后像这样使用：conststore=newVuex.Store({ // ...plugins:[myPlugin]})

一切如此简单，关键的一点就是在插件内部通过 store.subscribe() 来监听 mutation。在我们的持久化插件中，就是在这个函数内部对数据进行持久化操作。

二、允许用户选择需要被持久化的数据

首选初始化一个插件的主体函数：

const VuexLastingPlugin = function ({

watch: '*',

storageKey: 'VuexLastingData'

}) {

return store => {}

}

插件当中的 watch 默认为全选符号 *，允许传入一个 数组，数组的内容为需要被持久化的数据的 key 值，如 ['key1','key2'] 等。接着便可以去 store.subscribe() 里面对数据进行持久化操作了。

const VuexLastingPlugin = function ({

watch: '*'

}) {

return store => {

store.subscribe((mutation, state) => {

let watchedDatas = {}

// 如果为全选，则持久化整个 state

// 否则将只持久化被列出的 state

if (watch === '*') {

watchedDatas = state

} else {

watch.forEach(key => {