Vuex数据持久化

为什么要vuex数据持久化

让在vuex中管理的状态数据同时储存在本地。可免去自己储存的环节。

在开发的过程中，像用户信息（名字，头像，token）需要vuex中储存且需要本地储存
再例如，购物车如果需要未登录状态下也支持，如果管理在vuex中页面需要储存在本地

利用插件vuex-persistedstate 实现vuex数据持久化

1.安装

npm install vuex-persistedstate --save

2.使用，在stort.js文件中

import createPersistedState from 'vuex-persistedstate'
const state = {
    user:{},
}
export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations,
    plugins: [createPersistedState()]//会自动保存创建的state状态。刷新还在
    //默认存储在本地存储中
});

3.存储到sessionStorage中配置如下

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

vuex-persistedstate中的api

1. key ：存储持久状态的键。（默认：vuex）

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

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

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

5. storage ：而不是（或与）getState和setState。默认为localStorage。

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

7. setState ：将被调用来保持给定状态的函数。默认使用storage。

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