用localStorage坚持Vuex状态----vuex-persistedstate

要求

• Vue.js（v2.0.0 +）
• Vuex（v2.0.0 +）

安装

$ npm install vuex-persistedstate  --save-dev

用法

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...这样配置表示把VUEX中的所有数据存到localStorage中

 plugins: [createPersistedState()] 

 })

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等）的对象：

createPersistedState({ storage: window.sessionStorage })

当你将这个插件与服务器端渲染结合使用时，这是非常有用的，在这里可以传递一个dom-storage的实例。

Local️LocalForage⚠️

因为它可能看起来乍一看，它不可能作为属性传递一个LocalForage实例storage。这是因为所有的getter和setter必须是同步的，LocalForage的方法是异步的。