Vuex数据状态持久化-vuex-persistedstate使用二

最新推荐文章于 2025-04-29 10:55:39 发布

原创最新推荐文章于 2025-04-29 10:55:39 发布 · 382 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue.js项目中使用Vuex-persistedstate插件进行状态持久化管理，详细步骤包括安装插件、在store中引入并配置，以及在页面中使用。通过设置sessionStorage存储部分state，并定制reducer来保存特定模块的状态，实现了刷新页面后数据仍然保留的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.安装
npm install vuex-persistedstate --save

二.store的index.js中引入
import Vue from “vue”;
import Vuex from “vuex”;
import {
number
} from ‘./number/number.module.js’; //导入number模块的vuex的数据
import createPersistedState from “vuex-persistedstate”

Vue.use(Vuex);

const state = {
// 全屏状态
fullScreen: false,
}
const getters = {
fullScreen: state => state.fullScreen,
}
const mutations = {

}
const actions = {

}
console.log(number)
//vuex模块化 index是主体文件按功能模块导入
export default new Vuex.Store({
namespaced: true,
state,
getters,
mutations,
actions,

//子模块的注入
modules: {
number
},

plugins: [createPersistedState({
storage: window.sessionStorage,//sessionStorage
reducer(val) {
console.log(val, ‘38--------------’, )
return {
fullScreen: val.fullScreen, // 储存state中的fullScreen
number: {
count: val.number.count
}, //储存number模块state中的count;
}
}
})]
});
三.查看本地储存 sessionStorage
在这里插入图片描述