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存储的状态并不理想。人们可以轻松地实现功能使用（或任何其他你可以想到的）;

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 })

每一次的记录，都是向前迈进的一步