vuex组件 vuex-persistedstate

vuex用于管理项目中的全局状态，但是我们一刷新vuex中保存的全局状态就会被全部初始化，虽然我们也可以同事缓存到storage中做两步操作，但是vuex-persistedstate组件已经帮我们完成了同步更新

npm install vuex-persistedstate --save

然后用vuex中的plugins属性挂载

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({

  state,

  mutations,

  getters,

  plugins: [createPersistedState()]

})

在我们的localstorage中就会看到有一个vuex的key，值为{"showLogin":false,"navIndex":true,"token":"64c9bbf8541b47af8d891b20247ae6a3","nickName":"百宝箱","updataCart":false,"showLoading":false}的字符串的JSON数据

每次我们更新vuex的状态，localstorage中的vuex也会随之改变

API

createPersistedState([options])

使用给定的选项创建插件的新实例。可以提供以下选项来配置您的特定需求的插件：

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

• paths <Array>：部分持续状态的任何路径的数组。如果没有路径给出，完整的状态是持久的。（默认：[]）

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

• subscriber <Function>：一个被调用来设置突变订阅的函数。默认为store => handler => store.subscribe(handler)

• storage <Object>：而不是（或与）getState和setState。默认为localStorage。

• getState <Function>：将被调用以重新水化先前持久状态的函数。默认使用storage。

• setState <Function>：将被调用来保持给定状态的函数。默认使用storage。

• filter <Function>：将被调用来过滤将setState最终触发存储的任何突变的函数。默认为() => true

自定义存储

如果在本地存储中存储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),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

实际上，可以传递任何遵循存储协议（getItem，setItem，removeItem等）的对象：

// 用sessionStorage替换localStorage
createPersistedState({ storage: window.sessionStorage })