使用vuex解决刷新页面state数据消失的问题记录

在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。

因子：

  • Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
  • Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

言而总之：

实际问题：在vue项目中，使用Vuex做状态管理时，调试页面时，刷新后state上的数据消失了，该如何解决？

解决思路：将state中的数据放在浏览器sessionStorage和localStorage

解决办法：

存储到localStorage

通过监听页面的刷新操作，即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息
在App.vue中加入下面代码

created(){
 //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
  })

 //在页面加载时读取localStorage里的状态信息
  localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
 }

使用vuex-persistedstate 插件

安装插件：npm install vuex-persistedstate --save

配置：

在store的index.js中，手动引入插件并配置

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

该插件默认持久化所有state，当然也可以指定需要持久化的state：

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 设置只储存state中的myData
   myData: data.myData
  }
  }
 })]

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题

    页面刷新后,想保存页面未保存的数据.我们总是习惯于放在浏览器的sessionStorage和localStorage中.但是用了vue后,vuex便可以被应用了. vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. vuex可以进行全局的状态管理,但刷新后刷新后数据会消失,这是我们不愿意看到的.怎么解决呢,我们可以结合本地存储做到数据持久化,也可以

  • 使用vuex解决刷新页面state数据消失的问题记录

    在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到. Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失. 言而总之: 实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该

  • 关于vuex状态刷新网页时数据被清空问题及解决

    目录 vuex状态刷新网页时数据被清空 vuex状态在页面刷新时,会清空状态 vuex状态刷新网页时数据被清空 vuex状态管理,在网页刷新数据被清空的解决方法. 在main.js中写入下面的代码段(亲测有效) //刷新保存状态 if (sessionStorage.getItem("store")) { store.replaceState( Object.assign( {}, store.state, JSON.parse(sessionStorage.getItem("

  • Vue router传递参数并解决刷新页面参数丢失问题

    Vue Router 传参方式: 1. this.$router.push({ name: '模块名称', params: { // 各参数 } }) router.js: export default new Router({ routes: [ { path: '/paramsPassingByRouter', component: ParamsPassingByRouter, children: [ { path: 'paramsMode', name: 'paramsMode', com

  • vue解决刷新页面时会出现变量闪烁的问题

    目录 刷新页面时会出现变量闪烁问题 解决办法是: v-cloak vue刷新当前页面,且页面不闪烁 场景: 刷新当前页的方法 provide/inject 组合介绍 provide/inject 组合如何实现页面不闪烁刷新 刷新页面时会出现变量闪烁问题 在使用vue绑定数据的时候,刷新页面时会出现变量闪烁, 解决办法是: v-cloak 将代码修改如下: <div class="#app" v-cloak>     <p>{{value.name}}</p

  • vue下使用nginx刷新页面404的问题解决

    nginx 是一个代理的服务器. 出现的问题:写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404,并且从其他页面跳转可以看到但是刷新页面就404. 解决方法: 在文件中的nginx.conf文件中修改,代码如下 server { listen YYYY; //自己设置的端口号 server_name 192.168.XXX.XXX; //在黑窗口下ipconifg后出现的IPv4地址复制 location /{ root E:/website_wap/dist

  • 关于页面刷新vuex数据消失问题解决方案

    VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这是头疼的问题. 网上搜,大家的方案都是把数据转移到 localStorage或者其他持久化存储(例如indexDB). 这倒是可以,我在设计之初因为匆忙,没有考虑周全,这下好,然不成每个 mutation都去存一下. 这个弄的我很不开心,周六在公司,本来就困的要死,又想不到合理的解决方案,昏昏沉沉睡

  • 解决vuex刷新数据消失问题

    前言 vue构建的单页大型项目中,可能会用到Vuex .Vuex 的状态存储是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新. 但是有一个问题就是:vuex的存储的数据只是在页面的中,相当于我们定义的全局变量,刷新之后,里边的数据就会恢复到初始化状态.但是这个情况有时候并不是我们所希望的. 比如,用户已经登录了,我把登录状态放到state中了,一刷新页面,还要重新登录?购物车里的添加的数据,一刷新要重新添加? 解

  • 详解刷新页面vuex数据不消失和不跳转页面的解决

    详解刷新页面vuex数据不消失和不跳转页面的解决

    先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与重启项目,之前获取到的数据也只是通过store暂存起来,项目关闭时就不见了,这有些像电脑重启,存储在RAM的数据会消失.但是储存在sessionstorage.localstorage和cookie里的内容不会消失. Vuex 方法思路 首先得熟悉vuex,官网中介绍 Vuex 是一个专为 Vue.

  • 解决vue页面刷新vuex中state数据丢失的问题

    解决vue页面刷新vuex中state数据丢失的问题

    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决. 1.localstorage 可以使用 localstorage 来保存信息. [在某组件中添加如下钩子函数.比如 App.vue中] created() { //在页面加载时读取localStorage里的状态信息 if (localStorage.getItem("store") ) { this.$store

随机推荐