vue项目踩坑之旅：vuex持久化

Vuex状态持久化实践
最新推荐文章于 2025-09-29 10:17:23 发布
原创 最新推荐文章于 2025-09-29 10:17:23 发布 · 508 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

在项目中使用Vuex进行参数统一管理时遇到刷新数据丢失的问题，本文介绍如何利用vuex-persistedstate插件实现状态持久化，确保数据在页面刷新后依然存在。

在做项目总，页面跳转传参有两种方法，query，params，其中query会在路径显示内容，params刷新会消失

在本次项目中，我最终选择了使用vuex来统一管理需要传递的参数

问题是：
vuex刷新，数据也会丢失

于是用到了，vuex状态持久化插件vuex-persistedstate

以下为用法

https://www.jianshu.com/p/e88ab068820b

Vue状态管理深度剖析：Vuex vs Pinia —— 从原理到实践的全面对比
Allen-
05-21 4113
Vue应用的状态管理历经演变，从Vue2中成熟的Vuex到Vue3推荐的现代化库Pinia: 作为Vue生态系统长期信赖的状态管理解决方案，Vuex以其全面的特性和对大型项目的支持著称。它通过集中式存储、明确区分同步Mutation和异步Action，提供了一套严谨的状态管理流程，尤其适合复杂应用的开发。: 随着Vue3的发布，Pinia应运而生，它以其轻量级、易用性及对TypeScript的出色集成，成为新趋势。Pinia简化了状态更新逻辑，无需区分Mutation和Action。
Vue2（十二）：Vuex环境搭建、Vuex工作原理、Vuex开发者工具、几个配置项、多组件共享数据、Vuex模块化
Hdhhdhbsjxbdhvyg的博客
03-30 1499
你写的函数在Actions（数据类型是Object）就会有一个函数跟它对应，然后你自己再去调用commit函数（提交），到了mutations（数据类型也是Object），commit里的jia，mutations也会有一个jia跟它对应，同时它还会拿到两个参数：state状态和2。mutate不用你调用，只需要在mutations里的jia写一句state.sum+=2，底层自动加2，sum就不是0是2了，然后Vuex帮你开始渲染render，页面上的sum就变化了。
vuerouterstorage一个vue历史路由持久化的解决方案
08-08
vue-router-storage一个vue历史路由持久化的解决方案
VUE状态持久化，储存动态路由
QQ_852213985
10-05 1279
persistPlugin.js 文件。persistPlugin.js 文件。router.js文件。
Vue2——vuex本地持久化
最新发布
sixteenxiahuax的博客
09-29 441
刷新页面后 Vuex 被清空，用户要重新登录、购物车归零、主题重置……体验很差。移动端 Hybrid 或 SSR 场景下，内存回收更激进，持久化能显著提升稳定性。某些数据（token、用户偏好、离线草稿）本来就不该随着组件销毁而消失。
vue路由守卫配置，以及登录状态持久化前端配置
weixin_46194350的博客
04-13 670
vue路由守卫配置，以及登录状态持久化前端配置
动态路由配置持久化
wyy的博客
02-08 447
vuex状态持久化
你蠢哭我咯的博客
01-19 7345
原理大家都懂，就是存localstorage.用法npm install vuex-persistedstate状态管理的store.js中引入import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ // ... plugins: [createPersistedState
前端开发Vue.js状态管理：Vuex与Pinia的核心概念及应用
07-20
适合人群：具有一定Vue.js开发经验的研发人员，尤其是那些希望深入了解状态管理模式并在项目中高效应用Vuex或Pinia的开发者。 使用场景及目标：①理解和掌握Vue.js应用中状态管理的基本原理和最佳实践；②学习如何在...
Vue.js状态管理：Vuex与Pinia的比较
天涯学馆
08-08 1060
Vuex 是 Vue.js 官方提供的状态管理库，它基于 Flux 架构，提供了一个集中式的存储来管理应用的所有状态。Vuex 的核心概念包括 State、Getter、Mutation 和 Action。State：存储应用的状态。Getter：类似于计算属性，用于从 State 中派生出新的状态。Mutation：唯一更改 State 的方式，必须同步执行。Action：可以包含任意异步操作，提交 Mutations 来更改 State。
vue3.0之vuex持久化
pasco152的博客
12-01 1973
vuex-persistedstate插件实现vuex持久化，可以实现本地存储用户信息、未登录状态使用购物车等功能。
vuex持久化方案探究
weixin_33790053的博客
08-20 192
背景 用vue开发中大型应用时候，我们通常都会使用vuex进行状态管理，但由于vuex是将数据以js对象的形势维护在内存中，所以当页面刷新时候，存在内存中的vuex数据将会丢失，在很多场景中，我们不愿意看到这样的结果的 引出的问题 那么如何实现vuex的持久化，使得他能变得像localStorage，sessionStorag一样呢？ 自己造轮子 大体的思路无非就是将vuex的state存起来，初...
Vue缓存路由（keep-alive）以及新的生命周期
热门推荐
code_dream_wq的博客
01-17 1万+
​。
vuex数据状态持久化
Leon的博客
10-19 7196
用过vuex的肯定会有这样一个痛点，就是刷新以后vuex里面存储的state就会被浏览器释放掉，因为我们的state都是存储在内存中的。 所以我们通过 vuex-persistedstate这个插件，来实现将数据存储到本地 用法很简单 1. npm install vuex-persistedstate import createPersistedState from 'vuex-pers...
vuex-persist数据持久化存储
weixin_42881232的博客
09-13 599
vuex-persist数据持久化存储插件 Vuex 解决了多视图之间的数据共享问题。但是运用过程中又带来了一个新的问题是，Vuex 的状态存储并不能持久化。也就是说当你存储在 Vuex 中的 store 里的数据，只要一刷新页面，数据就丢失了。 引入vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中。具体用法如下 pexels-photo-1211847.jpeg 安装：
vue持久化存储踩坑
qq_41430522的博客
02-21 523
用插件就行,有很多插件,比如vuex-persist vuex-persistate啥的 但是用了很久没之久存储,最后发现是没通过mutation改变state就不能被持久存储,直接改statethis.$store.state.token='token111111'不行,.......差点吐血,虽然说项目中一般也都不会有这种写方法,但是没想到有这个坑,搞的我试了半天没试出demo 还有一个地方是vuex既可以全局引入,也可以页面引入, 全局引入:this.$store来使用 ...
【超详细】vue3+pinia+自动持久化插件+自定义存储器对象实现状态数据持久化
Samdy_Chan的专栏
03-08 2639
vue3 + pinia + pinia-plugin+persistedstate + js-cookie 实现状态管理及数据自动持久化到 localStorage、sessionStorage、cookieStorage
vuex实现数据持久化
ganle的博客
05-06 8875
Vue项目中使用Vuex作为状态管理，其本质上类似于全局的变量存储，方便在所有Vue组件中共享数据，而且也可以动态改变状态。Vuex是单向数据流，实现了双向数据绑定。 在单页应用中Vue项目集成Vuex足够基本使用，但是刷新页面的时候数据都会被清空，在某些情况下，我们需要这些状态能保存下来，比如登录后的用户信息、AccessToken、主题配置等。 持久化原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。 1、安装插件 vuex-persistedstate np
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
qq_52602294的博客
05-02 6314
这是一个vue3配合pinia的详细教程 这里面的安装插件 尽量使用 yarn进行安装；persist有两种用法，如果persist: true 是存储全部的内容 ，把true换为paths: ['count']， 可以指定存储的数据
Vue踩坑之旅——Vuex
06-03
非常感谢您的提问！以下是回答： Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它集中管理应用程序的所有组件的状态。在使用 Vuex 过程中，可能会遇到以下一些常见的问题和坑： 1. 不要在 mutations 中执行异步操作，因为 mutations 是同步执行的，异步操作会导致状态不一致。 2. 在组件中使用 mapState、mapGetters、mapMutations、mapActions 等辅助函数时，如果命名冲突，可以使用命名空间来避免。 3. 在使用 Vuex 时，应该注意代码的可维护性和可读性，避免将所有逻辑都写在一个文件中，应该按照模块化的方式组织代码。 希望这些信息能对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值