为什么刷新页面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