【vue2】解决Vuex刷新页面数据丢失的问题

简介: 【vue2】解决Vuex刷新页面数据丢失的问题

最近写vue2 项目需要用到vuex, 但遇到一个问题,存进store里的数据刷新就丢失了,于是乎百度解决。将自己的感受与解决方法记录下来。

数据丢失的原因

vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。

因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。

解决的思路

将vuex中的数据直接保存到浏览器缓存中(sessionStorage、localStorage、cookie) 页面刷新后再从浏览器中取出

解决方法

利用第三方库进行持久化存储

1.安装 vuex-persistedstate

npm install --save vuex-persistedstate

2.根据情况选择存储位置和方法

(1)在store文件夹下的indedx.js中配置信息,

使用vuex-persistedstate默认存储到localStorage

使用vuex-persistedstate默认存储到localStorage
import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
  state: {
    count: 1
  },
  mutations: {},
  actions: {},
  // 当state中的值发生改变,此时localStorage中的vuex的值会同步把state中的所有值存储起来,当页面刷
   新的时候,state的值会从localStorage自动获取vuex的value值,赋值到state中
  plugins: [createPersistedState()] 
})

(2)使用vuex-persistedstate默认存储到sessionStorage

const store = new Vuex.Store({
   state: {},
   mutations: {},
   actions: {},
   plugins: [createPersistedState({
       storage:window.sessionStorage  // 同localStorage相同,只是将vuex的所有值存储到sessionStorage中
   })]
})

(3)指定需要持久化的state

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store({
 state: {
  count: 0
},
 mutations: {},
 actions: {},
 plugins: [createPersistedState({
   storage:window.sessionStorage,
   reducer(val)  {
         // 此时,当count发生改变的时候,就会调用此函数,并且val的值为当前state对象,return的值为当前本地存储的value值(本地存储的key值为vuex)
         return {
             count: val.count,
         changeCount: 'aaa'
         }
     }
 })]
})

参考文章:解决Vuex刷新页面数据丢失的问题

下班~

目录
相关文章
|
存储 JavaScript
vue中query路由传参刷新页面后数据丢失解决
vue中query路由传参刷新页面后数据丢失解决
|
存储 缓存 移动开发
uinapp的setStorageSync和setStorage的区别
uinapp的setStorageSync和setStorage的区别
|
存储 JavaScript
vuex【解决方案】刷新页面数据丢失(两种方法)—— 含 vuex-along 教程
vuex【解决方案】刷新页面数据丢失(两种方法)—— 含 vuex-along 教程
967 0
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决?
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
8211 1
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
476 5
|
JSON 前端开发 JavaScript
成功解决:[object Object]
这篇文章讨论了在JavaScript中打印对象时出现的"[object Object]"问题的原因,并提供了使用`JSON.stringify()`方法将对象转换为字符串以便于打印和调试的解决方案。
成功解决:[object Object]
|
JSON JavaScript 数据格式
Vue路由params、query参数丢失解决
该文章介绍了在Vue中使用`params`和`query`进行路由参数传递时,如何通过`sessionStorage`或`localStorage`解决参数丢失的问题。
492 2
|
12月前
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
qiankun框架中基于actions机制实现主应用与子应用间的双向通信
668 0
|
JavaScript
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
【vue】el-dialog 内的tinymce弹窗被遮挡的解决办法 及 tinymce打开弹出菜单后直接关闭对话组件,导致该弹出菜单残留
858 6