今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题。

场景:

VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app.vue里通过接口获取然后存储在vueX里的,在路由activity.vue中,我们需要用到这个变量,并且通过这个变量的值来控制路由页面里某一段dom元素的显示与否。

这个需求这样描述起来,是很好实现的。于是我就简单写了几段代码,很简单轻松的实现了这个需求:

//acitity.vue

Dom结构

Created生命周期

我只需要在created生命周期里面,给posVersion这个变量赋值成this.$store.state.PV即可。

至此,这个需求看上去很“完美”的完成,没有任何问题。

直到。。。 。。。

BUG****场景:

直到测试的同学告诉我,首次进入路由,posVersion这个值为true的时候,dom元素正常显示,当用户F5刷新整个页面的时候,本应该继续显示的dom元素却不见了。

我复现了这个BUG,在created里面console.log(this.$store.state.PV),却输出了一个空。但是如果单纯刷新路由的话,dom元素还是可以正常显示的。

这是什么鬼呢到底?

在解决这个问题之前,我们先了解几个概念:

什么是VueX?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面,然后将这个对象放在顶层组件中供其他组件使用,它是另一种意义上的变量提升。

**

**

**

** 路由刷新

路由刷新是无刷新跳转,表面看起来就像是一个app应用,表现效果就像你写的 tab 选项卡,所有的数据都还存在内存里,页面是无重载的。

**

**

**

**

F5****页面刷新

F5刷新做了什么事呢,重新载入页面,销毁之前所有的数据。

所以,这个bug出现的问题就很好理解了,F5页面刷新,页面销毁之前的资源,重新请求,因此写在生命周期里的vuex数据是重新初始化,无法获取的,这也就是为什么会打印出空的原因。

那么既然知道问题的原因了?应该怎么处理这个问题。

解决思路1:

Localstorage 这是很容易想到的方法。将this.$store.state.PV存入到缓存里之后,然后监听页面重载事件,如果页面重新载入了,那就从缓存里读取数据,然后赋值,这样我们的dom元素就又可爱的回到了文档中间。

这个方法可以解决这个问题。但是如果需要用到localstorage的话,我完全可以让我的蒙蒙小伙伴在取到pv的值的时候直接存到缓存里,然后我直接用就可以,完全就不能出现这个问题,而且就算我自己存的话,也是相对繁琐的过程。(本方法未考虑接口返回慢的情况,请杠精少年不要太杠,不然下班跟我去搬砖)

PASS!

解决方法2:

我重新阅读了一下vue的官方文档,然后发现了这样一段话:

在此之前我曾经想过watch方法来监听this.pvVersion这个变量,但是在页面重载的时候watch方法也是重新进行计算加载的,所以我们可以选择计算属性这个方法来尝试解决这个问题,并且官方文档给出的解释当中也提到了缓存,也就是如果有缓存的情况下computed会优先使用缓存,于是我在activity.vue里写下来computed

我怀着忐忑的心情,去手动刷新了页面,结果,本应该显示出来的dom元素,果然很给面子的显示了出来。

Computed属性的优点我试着来总结一下:

1. 纯响应式,computed里面所用到的data一旦改变,整个computed的方法就回重新计算这个属性值

2. 计算结果会被缓存起来,方便下次使用,如果下次调用的时候,其中的数据没有发生变化,则不会重新计算。

所以我们要善用computed属性去解决实际开发

本文转载于http://www.speedcode.cn/ArticleDetail?id=99

注: 实际使用时当vuex值变化时,F5刷新页面,vuex数据重置为初始状态,所以还是要用到localStorage或sessionStorage或cookie

## 我实际用到的

一、补充本地存储 localStorage

在App.vue中使用

created(){
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg")))); //在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
}

二、插件vuex-persistedstate

npm install vuex-persistedstate  --save
引入及配置

在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
// ...
plugins: [createPersistedState()]
})



存储到sessionStorage(cookie与localStore一样):

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'
import createPersistedState from "vuex-persistedstate" // vuex-persistedstate默认持久化所有state,指定需要持久化的state
Vue.use(Vuex) export default new Vuex.Store({
modules: { user },
getters,
plugins: [
createPersistedState({
storage: window.sessionStorage
})
]
})

vuex-persistedstate默认持久化所有state,指定需要持久化的state,配置如下:

plugins后面加数组可以配置多个

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import user from './modules/user'
import createPersistedState from "vuex-persistedstate" // vuex-persistedstate默认持久化所有state,指定需要持久化的state
Vue.use(Vuex) export default new Vuex.Store({
modules: { user },
getters,
plugins: [
createPersistedState({
storage: window.sessionStorage,
reducer(val) {
return {
// 只储存state中的user
user: val.user
}
}
})
]
})

2、vuex页面刷新数据不保留,解决方法(转)的更多相关文章

  1. vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...

  2. vue 缓存的keepalive页面刷新数据

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认 ...

  3. uni-app开发经验分享一: 多页面传值的三种解决方法

    开发了一年的uni-app,在这里总结一些uni-app开发中的问题,提供几个解决方法,分享给大家: 问题描述:一个主页面,需要联通一到两个子页面,子页面传值到主页面,主页面更新 问题难点: 首先我们 ...

  4. 详细介绍ASP.NET页面间数据传递的使用方法

    源码:http://www.jinhusns.com/Products/Download/?type=xcj 在ASP.NET中,页面间数据传递的方法有很多.下面为大家总结一下,页面间数据传递的方法. ...

  5. C# Winform频繁刷新导致界面闪烁解决方法

    C#Winform频繁刷新导致界面闪烁解决方法 一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供的默认双缓冲将 ...

  6. winform频繁刷新导致界面闪烁解决方法

    转自龙心文 原文 winform频繁刷新导致界面闪烁解决方法 一.通过对窗体和控件使用双缓冲来减少图形闪烁(当绘制图片时出现闪烁时,使用双缓冲) 对于大多数应用程序,.NET Framework 提供 ...

  7. AppStore下载失败使用已购页面再试一次解决方法

    AppStore载失败 使用已购页面再试一次解决方法 工具/原料 Mac OS 方法/步骤 1.大家可以先试试更改系统 DNS 的方法,由于苹果的 App Store 应用商店在国外,所以 DNS 如 ...

  8. PHP file_get_contents函数读取远程数据超时的解决方法

    PHP file_get_contents函数读取远程数据超时的解决方法 投稿:junjie 字体:[增加 减小] 类型:转载   这篇文章主要介绍了PHP file_get_contents函数读取 ...

  9. [转]mysql导入导出数据中文乱码解决方法小结

    本文章总结了mysql导入导出数据中文乱码解决方法,出现中文乱码一般情况是导入导入时编码的设置问题,我们只要把编码调整一致即可解决此方法,下面是搜索到的一些方法总结,方便需要的朋友. linux系统中 ...

随机推荐

  1. 前端面试题整理—jQuery篇

    1.为什么使用jquery,他有哪些好处? 1)轻量级.代码简洁 2)强大的选择器,出色的DOM操作封装 3)有可靠的事件处理机制 4)浏览器兼容性好 5)支持链式操作 6)支持丰富的插件 2.jqu ...

  2. 【codeforces 765F】Souvenirs

    Description Artsem is on vacation and wants to buy souvenirs for his two teammates. There are n souv ...

  3. RT-SA-2019-004 Cisco RV320 Unauthenticated Diagnostic DataRetrieval

    Advisory: Cisco RV320 Unauthenticated Diagnostic Data Retrieval RedTeam Pentesting discovered that t ...

  4. CF1119B Alyona and a Narrow Fridge

    题目地址:CF1119B Alyona and a Narrow Fridge \(O(n^2)\) 暴力枚举+贪心 从小到大枚举答案 假设枚举到 \(i\) ,将 \(a_1\) 到 \(a_i\) ...

  5. SQL Server - DISTINCT

    http://www.runoob.com/sql/sql-distinct.html 只选出不同的值,过滤掉重复的值.

  6. RT throttling分析【转】

    转自:https://blog.csdn.net/u012728256/article/details/72639612 Linux上调度策略为SCHED_FIFO的实时进程是根据优先级抢占运行的.当 ...

  7. setTimeout 第三个参数秒懂

    好吧,假设你们都是从 ES6 里 promise 发现 setTimeout 还有第三个参数的,下面讲讲到底是干嘛的 setTimeout 第三个及之后的参数作用:定时器启动时候,第三个以后的参数是作 ...

  8. HDU 2196 Compute --树形dp

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  9. Excel VBA入门(8): 代码调试/错误处理/代码优化

    VBE有丰富的调试工具, 比如立即窗口, 本地窗口, 监视窗口, 断点调试... 第一个博文中已经讲过调试的基本操作: 设置断点, F5运行, F8逐条运行 断点就是程序中暂停停止运行的位置, 设置断 ...

  10. freemarker是什么东西?

    前言 由于考虑到网站访问量,以及tocmat可能承受的最大访问压力,我们需要引进一些比较好的技术,来解决这个问题.所以在项目快要结束之际又收到消息,我们要考虑到这些问题然后对现在的项目进行改进,于是就 ...