解决vuex刷新页面后数据丢失的方法

为什么刷新页面vuex的数据会丢失

刷新页面vuex的数据会丢失属于正常现象，因为js的数据都是保存在浏览器的丢站内存里面的，刷新浏览器页面，会将堆栈申请的内存释放，堆栈里的数据自然也就清空了

解决方法

1.利用本地存储

localStorage或者sessionStroage

const state = {
 //（2）从本地存储里面读数据，注意在这要写它为空的情况，避免undefined情况发生
  authInfo: JSON.parse(sessionStorage.getItem("INFO")) || {}  
}
const mutations = {     //（1）使用mutations直接操作数据将其存入本地存储里面
  GetInfo(state, val) {
    state.authInfo = val
   sessionStorage.setItem("INFO", JSON.stringify(val))
  }
}
//actions 模块里无需使用 sessionStorage
export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}

2. vuex-persistedstate

1.安装 vuex-persistedstate

npm install --save vuex-persistedstate

若出现安装错误，可以使用

.npm i vuex-persistedstate --legacy-peer-deps //同级安装
或者
npm install vuex-persistedstate -f //强制安装

2.在store文件夹里的index.js中引入vuex-persistedstate，并配置代码

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import createPersistedState from "vuex-persistedstate"   （1）引入vuex-persistedstate
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
plugins: [createPersistedState({    
 //存储的地方，若是不写，默认存储到locaStoreage里面
    storage: window.sessionStorage,  
     path:['要存储仓库的名字']
  })]
})
export default store;

参数说明：

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

key ：在本地存储中的名字。（默认：vuex）

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

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

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

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

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

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

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