06.vuex数据状态持久化.md

1. vuex 数据状态持久化

Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。因为 Vuex 也是 js，存在于内存中，刷新浏览器的话会导致 js 重新加载，Vuex 的 Store 全部重置。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。

1.1. 手动利用 HTML5 的本地存储

1. vuex 的 state 在 localStorage 或 sessionStorage 中取值；

2. 在 mutations 中,定义的方法里对 vuex 的状态操作的同时对存储也做对应的操作。

这样 state 就会和存储一起存在并且与 vuex 同步

1.2. 利用 vuex-persistedstate 插件

• 安装

npm install vuex-persistedstate

• 引入及配置：在 store 下的 index.js 中

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

• 想要存储到 sessionStorage，配置如下：

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

• vuex-persistedstate默认持久化所有state，指定需要持久化的state，配置如下：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage,
      reducer(val) {
          return {
          // 只储存state中的user
          user: val.user
        }
     }
  })]

• vuex-persist 的详细属性：

属性	类型	描述
key	string	将状态存储在存储中的键。默认: 'vuex'
storage	Storage (Web API)	可传 localStorage, sessionStorage, localforage 或者你自定义的存储对象. 接口必须要有 get 和 set. 默认是: window.localStorage
saveState	function (key, state[, storage])	如果不使用存储，这个自定义函数将保存状态保存为持久性。
restoreState	function (key[, storage]) => state	如果不使用存储，这个自定义函数处理从存储中检索状态
reducer	function (state) => object	将状态减少到只需要保存的值。默认情况下，保存整个状态。
filter	function (mutation) => boolean	突变筛选。看 mutation.type 并返回 true，只有那些你想坚持写被触发。所有突变的默认返回值为 true。
modules	string[]	要持久化的模块列表。