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

本文介绍了如何在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
在这里插入图片描述

四.在页面中使用
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值