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

场景:

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. excel转换为TXT文本

    #_*_ coding:utf-8 _*_#author:yr import xlrd data = xlrd.open_workbook(r"C:\Users\yangr\Desktop\ ...

  2. centos7 下 nfs 搭建总结

    nfs一般用于生产环境磁盘空间不足导致数据无法写入,从而通过异机远程挂载磁盘方式解决问题. 一. rpm -qa | grep nfs-utils rpm -qa | grep rpcbind 二. ...

  3. linux文件系统初始化过程(4)---加载initrd(中)

    一.目的 上文详细介绍了CPIO格式的initrd文件,本文从源代码角度分析加载并解析initrd文件的过程. initrd文件和linux内核一般存储在磁盘空间中,在系统启动阶段由bootload负 ...

  4. NB-IoT省电模式:PSM、DRX、eDRX【转】

    转自:https://blog.csdn.net/zoomdy/article/details/80447372 NB-IoT支持三种省电模式:PSM (Power Saving Mode,省电模式) ...

  5. C# 微信开发-----微信会员卡(一)

    这是微信的官方文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1451025283,能看懂的朋友就请不要往下看了,我是看不懂 ...

  6. Linux安装与基本命令

    安装centos镜像 #下载地址https://www.centos.org/download/ http://isoredirect.centos.org/centos/7/isos/x86_64/ ...

  7. C#批量裁剪图片

    有一批图片是全屏拷贝下来的,只需要保留指定区域的图片,用代码实现如下: Bitmap srcBmp = new Bitmap(fi.FullName); Bitmap dstBmp = srcBmp. ...

  8. idea整合 spring boot jsp mybatis

    spring  boot  开发起来确实要简单许多 ,spring boot  包含了 spring mvc ;内置tomcat   ;启动只需要主方法即可 1.使用idea新建一个spring bo ...

  9. sys.stdout = io.TextIOWrapper(sys.stdout.buffer,encoding='utf8') #改变标准输出的默认编码

    不论使用urllib还是使用requests库经常会遇到中文编码错误的问题,我就经常遇到,因为python安装在windows平台上,cmd的默认编码为GBK,所以在cmd中显示中文时会经常提示gbk ...

  10. vue v-cloak知识点

    1.使用 v-cloak 属性可以解决插值表达式闪烁问题;     2.v-text默认是没有闪烁的问题,同时会覆盖元素中原本的内容,但是v-cloak只会替换 自己的这个占位符,不会替换所有的字符 ...