vuex持久化vuex-persistedstate,存储的数据刷新页面后导致数据丢失

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 是否存储成功

  1. 打开 Application > Local Storage

  2. 确认是否存在键名 vuex,其值应包含 requestUrl

  3. 如果没有 vuex 键,说明插件未生效。

相关推荐
peakmain92 分钟前
Gradle 8.11.1的升级之旅
前端
1024小神13 分钟前
tauri项目在windows上的c盘没有权限写入文件
c语言·开发语言·windows
KaneLogger15 分钟前
视频转文字,别再反复拖进度条了
前端·javascript·人工智能
老虎062721 分钟前
数据结构(Java)--位运算
java·开发语言·数据结构
yanjiaweiya21 分钟前
云原生-集群管理续
java·开发语言·云原生
Swift社区22 分钟前
Swift 解 LeetCode 320:一行单词有多少种缩写可能?用回溯找全解
开发语言·leetcode·swift
写不出来就跑路27 分钟前
暑期实习感悟与经验分享:从校园到职场的成长之路
java·开发语言·经验分享·spring boot
前端风云志28 分钟前
JavaScript中如何遍历对象?
javascript
weixin_472339466 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
zwjapple7 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker