vuex存储刷新_2、vuex页面刷新数据不保留，解决方法（转）

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

场景&＃xff1a;

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

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

Dom结构

Created生命周期

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

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

直到。。。 。。。

BUG****场景:

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

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

这是什么鬼呢到底&＃xff1f;

在解决这个问题之前&＃xff0c;我们先了解几个概念&＃xff1a;

什么是VueX?

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

**

**

**

** 路由刷新

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

**

**

**

**

F5****页面刷新

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

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

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

解决思路1&＃xff1a;

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

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

PASS&＃xff01;

解决方法2&＃xff1a;

我重新阅读了一下vue的官方文档&＃xff0c;然后发现了这样一段话&＃xff1a;

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

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

Computed属性的优点我试着来总结一下&＃xff1a;

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

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

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

本文转http://www.speedcode.cn/ArticleDetail?id&＃61;99

注&＃xff1a; 实际使用时当vuex值变化时&＃xff0c;F5刷新页面&＃xff0c;vuex数据重置为初始状态&＃xff0c;所以还是要用到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",()&＃61;>{

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 &＃61; new Vuex.Store({

// ...

plugins: [createPersistedState()]

})

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

import Vue from &＃39;vue&＃39;

import Vuex from &＃39;vuex&＃39;

import getters from &＃39;./getters&＃39;

import user from &＃39;./modules/user&＃39;

import createPersistedState from "vuex-persistedstate" // vuex-persistedstate默认持久化所有state&＃xff0c;指定需要持久化的state

Vue.use(Vuex)

export default new Vuex.Store({

modules: { user },

getters,

plugins: [

createPersistedState({

storage: window.sessionStorage

})

]

})

vuex-persistedstate默认持久化所有state&＃xff0c;指定需要持久化的state,配置如下&＃xff1a;

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

import Vue from &＃39;vue&＃39;

import Vuex from &＃39;vuex&＃39;

import getters from &＃39;./getters&＃39;

import user from &＃39;./modules/user&＃39;

import createPersistedState from "vuex-persistedstate" // vuex-persistedstate默认持久化所有state&＃xff0c;指定需要持久化的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

}

}

})

]

})