1. 问题：vuex页面刷新，状态被初始化。

最新推荐文章于 2024-07-02 17:47:34 发布
最新推荐文章于 2024-07-02 17:47:34 发布
阅读量761 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43620210/article/details/83860808
版权

原因：vuex是对数据的缓存（走的浏览器的缓存），当浏览器刷新的时候，vuex里面定义的变量会被初始化，并不能长久保存。 解决方案：把本地与vuex进行数

解决方案：把本地与vuex进行数据同步，存vuex的同时，也存本地一份，在主js里面判断本地是否具有存储的数据，有的话再赋值给vuex，详情见图：(不局限此方法)

Main.Js:

最美不过初相见^_^
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue常见问题及解决-页面刷新vuex状态初始化
codingWeb的博客
02-14 1272
预备知识： vuex五种基本对象: state：存储状态（变量） getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用$sotre.getters.fun() mutations：修改状态，并且是同步的。在组件中使用$store.commit(’’,params)。这个和我们组件中的自定义事件类似。 actions：处理异步操作。在组件中使用是$store....
如何防止在刷新时vuex中的数据被初始化
weixin_45290022的博客
12-02 329
如何防止在浏览器刷新时vuex中的数据被初始化 vuex是在中大型项目中必不可少的状态管理组件，但是在使用的过程中会出现刷新会重新更新状态的问题，有时候会影响我们获取某些数据，例如全局相关的，如登录状态、token、以及一些不常更新的状态等，所以为了能后将不经常更新的数据固定化，减少接口的请求次数，这里推荐一种方法：使用vuex持久化来解决。 使用方法： 1、安装 npm i -S vuex-persistedstate 我自己安装的版本号 "vuex-persistedstate": "^3.0.1"
vue项目中解决刷新导致数据初始化问题
weixin_42504805的博客
05-24 324
vue项目中解决刷新导致数据初始化问题
vue界面刷新vuex变量初始化问题
小不点的博客
04-20 2434
最近在用vue写pc端项目，用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。 1. 产生原因 因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路直接上代码 //在app.vue中插入 <template> <div id="ap...
解决 Vuex 页面刷新数据丢失问题
最新发布
My_wife_QBL的博客
07-02 783
Vuex 是 Vue.js 的官方状态管理库，用于在 Vue 应用中集中管理应用的状态。然而，当用户刷新页面时，Vuex 中的状态会丢失，这可能会导致用户体验不佳。本文将探讨如何解决 Vuex 页面刷新数据丢失的问题，并提供一些实用的解决方案。
vuex刷新后丢失原因和解决办法
weixin_46846007的博客
06-12 9947
vuex刷新后丢失原因和解决办法
解决Vuex刷新页面数据丢失的问题
m0_70547044的博客
01-16 632
解决Vuex刷新页面数据丢失的问题
Vue项目中实现改变屏幕尺寸重新刷新页面-计算页面尺寸
JackieDYH的博客
05-01 4009
效果 在app.vue中设置 方式一 <template> <div id="app"> <router-view /> </div> </template> <script> export default { name: "App", components: {}, data() { return {}; }, created() {}, mounted() { ..
vue的面试总结（3）
weixin_51101223的博客
12-12 176
12、vue-router ❄ 单页面路由跳转的方式： ​ **①hash(哈希默认)模式：**使用 URL hash 值来作路由。默认模式。 ​ ②history(mode:history)模式： 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。 ​ **③abstract模式(严格模式)：**支持所有 JavaScript 运行环境，如 Node.js 服务器端。 ​ 根据mode参数来决定采用哪一种方式。 ​ **vue-r
使用vuex刷新后数据初始化问题的解决
jiangjunyuan168的博客
10-30 1043
原因： 由于vuex中的数据是保存在内存，所以刷新页面相当于是清除内存，vuex中保存的数据会清空。 解决方法： 1、利用localstorage缓存解决vuex数据的刷新问题 localstorage：浏览器缓存，将数据保存在本地，除非被清除，否则永久保存。 vuex的配置文件： state:{ count: '', }, mutations:{ setCount: (state, count) => { localStorage.setItem('count',c
vueX的值在刷新之后恢复初始值
qq_42412222的博客
12-31 1340
vueX的值在刷新之后恢复初始值在使用vuex的时候，按f5或者刷新页面会导致他的值恢复成初始值1.安装2.引入3.说明 在使用vuex的时候，按f5或者刷新页面会导致他的值恢复成初始值 这个问题可以通过使用插件解决，插件vuex-along -是一个持久化存储 state 的 vuex 扩展。 1.安装 npm install vuex-along --save # or yarn add vuex-along 2.引入 在vuex文件夹store的index.js里面添加 import create
[vue] 解决vuex中state页面刷新恢复默认值的一些思路
qq_34450741的博客
08-04 5914
现有需求： 公用头部组件有个购物车图标及商品数量（数量默认是0）； 点击加入购物车按钮时（不同页面都有加入购物车按钮，它们之间是非子父组件之间关系），实时改变购物车数量的变化； 我们都知道，实现它可以使用vuex，但是页面刷新时，要保持vuex中的值不会被还原成默认值，该怎么做呢？可能废话有点多，请忽略哈，下面开始进入正题： 思路：其实很简单，就是 ...
关于vuex页面刷新时state中的状态重置问题
qwerewf的博客
08-02 2007
在编写项目的时候会遇到刷新页面时，vuex中的状态会被重置的原因 产生原因 解决方案 案例 产生原因： 由于store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值 解决方案： 当用户修改了state状态刷新的时候vuex实现又被重新加载了， 那怎么办呢？ 这时候我们可以利用BOM的sessionStorage来进行存储。 为什么选择sessionStorage的原因： localStorage是永久存储在本地，除非你主动去删除; s
页面刷新导致vuex中的数据被初始赋值
dzry_lr的博客
08-24 459
登录之后存储的vuex中的值在按下f5或者浏览器刷新页面情况下，被重新赋值成初始值。在导入vuex的state和modules的index.js中导入引用。
vuex刷新页面数据重置问题
weixin_30487201的博客
04-03 572
由于vuex是保存在内存中的所以每次页面刷新数据都会被重置，相当于重新加载js代码。 那么看了很多页面，登入后刷新页面用户数据不消失的问题又是怎么做的呢？ 小编总结了两个方案 方法一：利用beforeunload事件在用户刷新页面时将vuex的store存入sessionstorage中然后再在页面加载时获从sessionstorage中获取,replaceState store，然后清除...
刷新后，store中数据丢失处理
weixin_43422861的博客
08-07 3124
//在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage里 window.addEventLi.
vuex：解决页面刷新vuex数据重置
zxxAdela的博客
07-04 1066
js的数据都是保存在浏览器的[堆栈内存](https://www.rstk.cn/news/899965.html?action=onClick)里面的，刷新浏览器页面，以前堆栈申请的内存被释放，这就是浏览器的运行机制，堆栈里的数据自然就清空了
解决vuex刷新页面就恢复初始化的方法之一
weixin_30823833的博客
11-16 945
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 vue实现了全局变量的共享，然而vuex也不是万能的，他在刷新页面的时候就会...
VUE解决页面刷新VUEX状态刷新初始化问题
qq_45186619的博客
09-08 530
vuex 页面刷新状态初始化问题，我写在App.vue 中。
vuex页面刷新数据丢失怎么解决
07-27
这是由于 Vuex 的状态是保存在内存中的，而页面刷新会导致整个应用重新加载，状态也会重新初始化。 为了解决这个问题，你可以考虑以下几种方法： 1. 使用持久化插件：你可以使用一些 Vuex 的持久化插件，如 vuex-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值