页面刷新时vuex数据持久化问题的解决方案

vuex是在中大型项目中必不可少的状态管理组件，刷新会从新更新状态，可是有时候咱们并不但愿如此。例如全局相关的，如登陆状态、token、以及一些不常更新的状态等，咱们更但愿可以固化到本地，减小无用的接口访问，以及更佳的用户体验。

用法

安装:

npm install vuex-persistedstate --save

vuex初始化就开始引入：

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

vuex-persistedstate默认使用localStorage来固化数据.

自定义存储方式

使用sessionStorage

plugins: [
 persistedState({ storage: window.sessionStorage })
]

使用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)
 }
 })
 ]
})

 

vuex-persistedstate文档

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

gitHub地址：https://github.com/robinvdvleuten/vuex-persistedstate