vuex持久化存储

在开发过程中你会发现一旦你刷新了页面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 一个函数，将被调用来减少基于给定的路径持久化的状态。默认包含这些值

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 ：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)
• storage