vuex持久化存储

原文：https://www.jianshu.com/p/2fdc3a681c9b

在开发过程中你会发现一旦你刷新了页面vuex就会被重置，刷新浏览器的话会导致js重新加载，Vuex的Store全部重置, 所以为了防止这类情况的发生的话，一般来说我们会用localStorage对vuex进行一个存储，防止Vuex丢失的情况。但是如此这样做的话在每次状态变更时都要手动的去存储下，这样就比较麻烦了，查看vuex文档官方给我们提供一个插件选项，这时我们就会想通过插件了做这些动作了，看下vuex插件如何写的。

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}

然后像这样使用：

const store = new Vuex.Store({
  // ...
  plugins: [myPlugin]
})

由此我们可以这样做：

const myPlugin = store => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
     localStorage.setItem("store",  JSON.stringify(state))  //因为vuex都是通过mutation来修改数据的，所以在每次修改的时候都把state存到本地内存中
  })
}

这只是一种比较简单的处理vuex存储的数据会丢失问题。如果有时间可以自己写插件将其完善，在此推荐使用vuex-persistedstate插件该插件已经比较完美的做了上述事情

安装

npm install vuex-persistedstate  --save

使用

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

createPersistedState([options])参数使用说明

• key 存储持久状态的键。（默认：vuex）

import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
    key: 'stort'                                //localStorage名为stort
  })]
})

• paths 用于部分保持状态的任何路径的数组。如果没有给定路径，则将保持完整状态 （默认：[]）

const state = {
    userInfo: null,
    token    :null
};
import createPersistedState from 'vuex-persistedstate'
 
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
    paths  : [
              'userinfo'                                        //localStorage只保存userinfo信息
          ]
  })]
})

• reducer <Function> 一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
     reducer(state,paths) {
            return {
                // 只储存state中的user
                user: state.userInfo      //只存储userInfo信息并且在localStorage中userInfo命名替换成user
            }
        }
     }
  })]

• subscriber <Function>：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
• storage <Object>：而不是（或与）getState和setState。默认为localStorage。

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage      //选择sessionStorage 进行存储
     }
  })]

• getState <Function>：将被调用以重新水化先前持久状态的函数。默认使用storage。
• setState <Function>：将被调用来保持给定状态的函数。默认使用storage。
• filter <Function>：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true
• arrayMerger<function>：用于在重新水化状态时合并数组的函数。默认为功能（存储，保存）返回保存（保存状态替换提供状态）。

自定义存储

如果在本地存储中有Vuex存储的状态是不理想的话。您可以轻松实现使用cookie的功能（或者您可以想到的任何其他功能）

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
 
const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        // Please see https://github.com/js-cookie/js-cookie#json, on how to handle JSON.
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})