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 键,说明插件未生效。

相关推荐
weixin_472339463 小时前
高效处理大体积Excel文件的Java技术方案解析
java·开发语言·excel
zwjapple4 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
枯萎穿心攻击4 小时前
响应式编程入门教程第二节:构建 ObservableProperty<T> — 封装 ReactiveProperty 的高级用法
开发语言·unity·c#·游戏引擎
Eiceblue5 小时前
【免费.NET方案】CSV到PDF与DataTable的快速转换
开发语言·pdf·c#·.net
m0_555762906 小时前
Matlab 频谱分析 (Spectral Analysis)
开发语言·matlab
像风一样自由20206 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem7 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊7 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术7 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing7 小时前
0704-0706上海,又聚上了
前端·新浪微博