vue 解决vuex页面刷新数据消失的问题（好用）

这个控件实际也是在用sessionStorage或localStorage，只是自己不用再往sessionStorage或localStorage存储，控件默认存储到sessionStorage或localStorage

首先 npm install vuex-persistedstate --save

属性 类型 描述

key	string	将状态存储在存储中的键。默认: 'vuex'
storage	Storage (Web API) 可传localStorage, sessionStorage, localforage 或者你自定义的存储对象.	接口必须要有get和set. 默认是: window.localStorage
saveState	function (key, state[, storage])	如果不使用存储，这个自定义函数将保存状态保存为持久性。
restoreState	function (key[, storage]) => state	如果不使用存储，这个自定义函数处理从存储中检索状态
reducer	function (state) => object	将状态减少到只需要保存的值。默认情况下，保存整个状态。
filter	function (mutation) => boolean	突变筛选。看mutation.type并返回true，只有那些你想坚持写被触发。所有突变的默认返回值为true。
modules	string[]	要持久化的模块列表。

作者：一人创客
链接：https://www.jianshu.com/p/04c288731819
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  plugins: [createPersistedState({
    storage: window.sessionStorage // 这里控制存储到哪里
  })],
  state: {
    userName: "", // 用户名
    topNavState: 'home', // 顶部导航
  },
 
  mutations: {
    update_username(state, params) {
      state.userName = params;
    },
    update_topNavState(state, params) {
      state.topNavState = params;
    },
   
  },
  actions: {},
})

export default store;

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