1.安装插件
vuex-persistedstate实现数据持久化，来解决使用vuex存储状态时页面刷新后数据消失的问题
vuex-persistedstate：在页面重新加载之间保持并重新补充Vuex状态
npm install --save vuex-persistedstate
2.具体的代码， 现在需要持久化存储的 requestUrl
user.js
state: {
requestUrl: ''
},
mutations: {
SET_WEBSITE_ROUTETURL: (state, title) => {
state.requestUrl = title;
},
},
actions: {
SetWebSiteTitle_routeUrl({ commit, state }, title) {
console.log(title)
commit('SET_WEBSITE_ROUTETURL', title);
},
}
index.js
import { createStore } 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 dict from './modules/dict'
import createPersistedState from 'vuex-persistedstate';
const vueStore = createStore({
state: {},
mutations: {},
actions: {},
modules: {
app,
user,
tagsView,
permission,
dict,
// settings
},
plugins: [
createPersistedState({
storage: window.localStorage,
reducer(state) {
return {
user: {
requestUrl: state.user.requestUrl, // 只持久化 requestUrl
},
};
},
}),
],
getters,
});
export default vueStore;
3.验证 localStorage 是否存储成功
-
打开 Application > Local Storage。
-
确认是否存在键名
vuex，其值应包含requestUrl。 -
如果没有
vuex键，说明插件未生效。
