当前位置: 首页 > news >正文

Vuex持续保存数据 页面刷新不丢失 vuex-persistedstate

vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据状态持久化,但是太麻烦每次都要操作,强烈建议使用插件利用vuex-persistedstate插件.

安装

npm install vuex-persistedstate --save

1.使用vuex-persistedstate默认存储到localStorage
+引入及配置:在store下的index.js中

import createPersistedState from "vuex-persistedstate"
conststore =newVuex.Store({plugins: [createPersistedState()]
})

2.使用vuex-persistedstate存储到sessionStorage
+引入及配置:在store下的index.js中

import createPersistedState from "vuex-persistedstate"
conststore = newVuex.Store({plugins: [createPersistedState({storage:window.sessionStorage})]
})

3.使用vuex-persistedstate指定需要持久化的state
+引入及配置:在store下的index.js中

import createPersistedState from "vuex-persistedstate"conststore = newVuex.Store({plugins: [createPersistedState({storage:window.sessionStorage,reducer(val)  {return {// 只储存state中的tokenassessmentData: val.token}}})]})
最后编辑于:2025-04-21 10:38:16


喜欢的朋友记得点赞、收藏、关注哦!!!

http://www.xdnf.cn/news/196813.html

相关文章:

  • WPF 程序监控硬件设备状态变化的实现方案
  • vscode源代码管理Tab-文件右侧标志(M、A 等)的含义
  • await和async
  • (28)VTK C++开发示例 ---添加坐标轴
  • std::print 和 std::println
  • echarts自定义图表--仪表盘
  • 【机器学习】人工智能在电力电子领域的应用
  • 反射与注解实现动态功能扩展案例-插件系统
  • 模型上下文协议(MCP)深度解析:大模型从“思考者“进化为“行动者“
  • 总账主数据——Part 2 科目-4
  • 优先队列和单调队列(双端队列实现的)
  • stm32wb55rg (1) 基于IAR 创建stm32 工程模板
  • 序列密码算法ShanLooog512设计原理详解
  • DeepSearch复现篇:QwQ-32B ToolCall功能初探,以Agentic RAG为例
  • React速通笔记
  • 初识Python
  • 【Keil5-开发指南】
  • Java实现基数排序算法
  • 机器学习day2
  • 深入理解链表:从基础操作到高频面试题解析
  • 省哲学社科基金项目申请书(论证活页)模版框架参考
  • 013几何数学——算法备赛
  • web技术与Nginx网站服务
  • word2Vec与GloVe的区别
  • LeetCode 1482. 制作 m 束花所需的最少天数
  • 【SpringMVC】详解参数传递与实战指南
  • MANIPTRANS:通过残差学习实现高效的灵巧双手操作迁移
  • 策略模式:灵活的算法封装与切换
  • 实验研究 | 千眼狼高速摄像机驱动精密制造创新
  • 9.学习笔记-springboot(P90-P104)