vuex持久化的简单介绍及应用

应用场景:
刷新页面的时候，vuex中存储的值会被清空，导致使用vuex中数据的页面无法正常显示，这时候就需要vuex数据持久化了。
方法：
使用 vuex-persistedstate 插件
安装插件：

npm install vuex-persistedstate --save

在store文件的index.js中引入

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";
import user from "./modules/user";
import tagsView from "./modules/tagsView";
import permission from "./modules/permission";
import settings from "./modules/settings";
import getters from "./getters";
import course from "@/store/modules/course";
import examination from "@/store/modules/examination";
import dicts from "@/store/modules/dicts.js";
import paper from "./modules/paper";
import createPersistedState from "vuex-persistedstate"
Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings,
    course,
    examination,
    dicts,
    paper,
  },
  getters,
  //创建持久化状态
  plugins: [createPersistedState({
  //存储位置，默认存储到localStorage
    storage:window.sessionStorage,
    //需要存的值，默认持久化所有state
    reducer(val)  {
      return{
        course:val.course
      }
    }
  })]
});

export default store;

localStorage与sessionStorage的区别：

localStorage: localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。localStorage 除非主动删除数据，否则数据永远不会消失

sessionStorage: sessionStorage 的生命周期是在浏览器关闭前。

API：
createPersistedState([options])使用给定的选项创建插件的新实例。可以提供以下选项来配置特定需求的插件：

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

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

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

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

storage ：默认为localStorage。

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