Vuex 数据状态持久化 vuex-persistedstate（配置全部或部分）

已于 2023-08-30 16:02:04 修改
阅读量1.5k 收藏 3
点赞数 1
分类专栏： Vue1.x和Vue2.x 文章标签： vuex vue.js
于 2021-10-13 16:35:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38290251/article/details/120745719
版权

1、安装插件 vuex-persistedstate

npm install vuex-persistedstate --save

原理：结合本地存储做到数据状态持久化，使页面刷新后数据不会初始化为默认状态。

2、默认存储到localStorage

3、使用vuex-persistedstate存储到sessionStorage

4、部分数据持久化

vuex-persistedstate提供有一个reducer函数，可以自定义存储Key，或者使用 paths参数，建议使用paths参数比较简单

【注意：截图中的path有误，应该是paths】

解析vuex-persistedstate的数据持久化插件
webDevelopSnail的博客
11-08 664
一.vuex-persistedstate作用 vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，解决方案如下： 结合本地存储做到数据持久化 vuex的state在localStorage或sessionStorage或其它存储方式中取值 在mutations,定义的方法里对vuex的状态操作的同时对存储也做对应的操作。 这样state就会和存储一起存在并且与vuex同步，但这样手动写比较麻烦。 通过插件-vuex-persistedstate 插件的原理其实也是结合了存储方式,只是统一的配置就不
解决刷新vuex数据消失的问题-- Vuex持久化插件 （vuex-persistedstate）
m0_45382009的博客
02-28 990
vuex可以进行全觉得状态管理，但是刷新后数据会消失。 1.安装 npm install vuex-persistedstate --save 2.配置 // store/index.js import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ //.... plugins:[createPersistedState()] }) 此插件的原理：利用本地存储 默认存入l
vuex实现数据状态持久化
10-16
今天小编就为大家分享一篇vuex实现数据状态持久化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vuex刷新数据丢失解决方式(插件)
最新发布
apple_70049717的博客
08-17 201
【代码】vuex刷新数据丢失解决方式(插件)
Vuex数据状态持久化
热门推荐
zhan_lijian的博客
07-03 1万+
vuex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persistedstate。 1.手动利用HTML5的本地存储 方法 1、vuex的state在localStorage或sessionStorage中取值； 2、在mutations中,定义的方法里对vuex的状态操作的同时对存储也...
【vue】vuex持久化插件vuex-persistedstate：
SunPeng的博客
09-05 2869
【vue】vuex持久化插件vuex-persistedstate：
vuex刷新页面数据丢失怎么解决_vuex状态管理器本地持久化
weixin_39674028的博客
11-21 306
上一小节我们讲解了vuex状态管理器的基本原理和使用场景，如果自己做过demo的童鞋不难发现，在web端点击刷新按钮之后原先保存在vuex里面的数据全都被初始化了。其实不止这种情况会初始化vuex数据，当你在js代码里面执行了window.location.reload()方法后同样会初始化。下面我们来举个栗子。1、准备工作在安装好vuex，还没安装的童鞋可以参考上一小节去安装好vuex。2、将s...
Vue 63 ，Vuex状态、数据持久化（Vue2、Vue3状态数据持久化）
weixin_65793170的博客
03-22 4353
⭐Vuex是一个仓库，是vue的状态管理工具，存放公共数据，任何组件都可以使用vuex里的公共数据。Vuex提供了插件系统，允许我们使用 vuex-persistedstate插件，将Vuex的状态持久化到本地存储中，解决页面刷新或重新打开应用时状态丢失的问题，这里分享Vuex数据持久化的几种实现方案。
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
10-17
而Vuex持久化插件（vuex-persistedstate）的出现，就是为了解决这个问题，它可以自动地将Vuex的状态保存到localStorage或sessionStorage中，并在页面加载时恢复状态。 接下来，让我们详细探讨Vuex持久化插件的使用...
vuex在modules模式下使用vuex-persistedstate插件做持久化
wozhenhaokan的博客
11-23 1472
vuex在modules模式下使用vuex-persistedstate插件做持久化
vuex持久化插件 vuex-persistedstate
qq_35590165的博客
09-21 589
安装 npm install vuex-persistedstate --save 1.使用vuex-persistedstate默认存储到localStorage import createPersistedState from "vuex-persistedstate" conststore =newVuex.Store({ plugins: [createPersistedState()] }) 2.使用vuex-persistedstate存储到sessionStorage import c
vuex-persistedstate的部分持久化
SYXZSs的博客
08-12 909
项目原先是别人写好的，所以他把所有的数据都持久化了，而我需要有的数据不持久化，所以就在这里用的代码记录一下我的修改 1: 下载 npm/yarn install vuex-persistedstate --save **************store文件夹下的index.js***************** 之后在这个文件里引入: import createPersistedState from "vuex-persistedstate" 使用: （这里是对所有的数据都进行持久化）
Vuex数据状态持久化-vuex-persistedstate
m0_37714008的博客
02-18 142
Vuex 作为一个专为 Vue.js 应用程序开发的状态管理模式，在中大型项目中备受青睐，它有着天然的优势：响应式的共享状态及可跟踪的状态变化。然而它也存在着明显的缺陷：页面刷新数据丢失。这非常容易理解，页面刷新重新加载需要重新实例化store：conststore = new Vuex.Store({state: {}})，状态当然会变为初始值。那么如何在刷新页面后保存之前的状态呢？ 1. 安装：npm install --save vuex-persistedstate 2. 配置： 使用vu...
vuex-persistedstate按需持久化(持久化部分数据)
jaqi.csdn
05-18 524
示例如下： import Vue from 'vue' import Vuex from 'vuex' import getters from './getters' import app from './modules/app' import settings from './modules/settings' // 设置相关 import user from './modules/user' // 用户相关 import tagsView from './modules/tagsView' // 已打开
veux持久化配置,vuex-persistedstate,解决网页刷数据丢失问题
lebron25的博客
10-03 315
veux持久化配置、vuex-persistedstate、解决网页刷数据丢失问题
vuex状态持久化
weixin_30478757的博客
07-17 66
npm install vuex-persistedstate 在store.js里 import createPersistedState from 'vuex-persistedstate' const state = { user:{}, } export default new Vuex.Store({ state, ge...
Vuex状态持久化
qq_41635174的博客
03-23 234
在app.vue 的created钩子里加下面代码 export default { name: 'app', components: {}, created() { if (sessionStorage.getItem("vuexState") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JS...
vuex中的状态持久化
︶￣城南花已开
03-22 178
vuex中的状态持久化
vuex数据状态持久化
qq_38718629的博客
04-02 5833
在VUE项目中，由于是单页应用，vuex中的数据在页面刷新时就会被清除，所以我们要考虑怎样让vuex中的数据持久保存在浏览器中，至少不能每次刷新时都丢失登录状态，这篇文章介绍VUE项目中常用到的两种vuex持久化的方法，底层实现原理一直，方法不太一样，可以在项目中根据实际来区分 方法一、浏览器监听+本地存储 我们可以监听浏览器的刷新，在页面刷新时将vuex内的数据保存在本地存储中(根据项目需要可以考虑保存在sessionStorage或者localStorage中) 在App.vue中，created生命周
Vuex持久化插件：vuex-persistedstate
09-01
Vuex持久化插件vuex-persistedstate是一个用于在Vue.js应用中实现Vuex状态的持久化的插件。它可以将Vuex中的某些状态保存在本地存储中，以便在页面刷新或重新加载后，仍然可以保持这些状态的值。 在使用vuex-persistedstate插件时，我们首先需要通过npm安装它，可以使用以下命令进行安装： npm install vuex-persistedstate --save 接下来，在我们的Vue应用中，我们需要在Vuex的store文件中引入vuex-persistedstate插件，并将其添加到Vuex的plugins选项中。以一个具体的例子来说明，如果我们想要给tab模块的state中的menu做持久化，我们可以使用如下代码配置我们的store： import Vue from 'vue' import Vuex from 'vuex' import tab from './tab.js' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) export default new Vuex.Store({ modules: { tab }, plugins: [ createPersistedState({ paths: ['tab.menu'] }) ] }) 在上述代码中，我们引入了createPersistedState方法并将其作为插件传递给Vuex的plugins选项。通过传递一个对象给createPersistedState方法的paths选项，我们可以指定需要持久化的状态的路径。在这个例子中，我们指定了tab模块下的menu状态需要进行持久化。 这样，当我们在应用中对tab模块的menu状态进行修改后，这个修改将会被自动保存在本地存储中。当我们刷新或重新加载页面时，这个状态的值将会被还原，以便我们可以继续使用之前保存的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vuex持久化存储插件vuex-persistedstate](https://blog.csdn.net/weixin_51382988/article/details/128584817)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值