您现在的位置是:首页 > 正文

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

2024-04-01 06:57:50阅读 0

最近写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刷新页面数据丢失的问题

下班~

网站文章

  • 新东方高中计算机模拟试卷,同等学力计算机综合模拟试题(2)

    1. 比较下列集合的基数大小并给出证明:A×A,P(A),2→A,A→2.解答与评分标准:|A×A| = |2→A| = |A|2(2 分),|P(A)| = |A→2| = 2|A|(2 分)。分情况讨论:(1) A 为空集:注意A→2={空关系},|A×A| = |2→A| = 0 < |P(A)| = |A→2| = 1。(1 分)(2) A 为有限集且|A|=1:|A×A| = |2...

    2024-04-01 06:57:40
  • Ubuntu下安装pycharm并激活

    Ubuntu下安装pycharm并激活

    1.在官网下载:2.提取到此处3.在含有pycharm.sh的文件夹下,右键,选择在此处打开终端输入./pycharm.sh执行安装好后,看到如下界面:学生可以选择用学生邮箱激活激活方式如下:1)按 buy pycharm 按钮,选择special offers(或进入网址https://www.jetbrains.com/pycharm/buy/?fr...

    2024-04-01 06:56:57
  • 写一程序,用scanf函数输入x,输出y值。

    写一程序,用scanf函数输入x,输出y值。

    有一函数: y=x²+2x-6  (x<0,x≠-3) y=x²-5x+6  (0≤x<10,x≠2,x≠3) y=x²-x-15  (x=-3,x=2,x=3,x≧10) 解题思路:先用scanf函...

    2024-04-01 06:56:51
  • 自己挖坑自己跳 之JsonMappingException: (was java.lang.NullPointerException) (through reference chain:)...

      在Web项目中,我们经常会设计一些与界面相对应的JavaBean作为Entity,而为了兼容前台传入的空值,有些字段我们会用包装类型而不是基本类型。可是往往我的Entity已经设计完成,很多时候我...

    2024-04-01 06:56:43
  • Black Hat Europe 2021议题解读:Wi-Fi Mesh中的安全攻击面

    Black Hat Europe 2021议题解读:Wi-Fi Mesh中的安全攻击面

    近年来,随着万物互联技术的发展,Mesh技术逐渐兴起,Mesh技术是一种组网技术,可将多个接入点组成同一个网络来提供服务,相比于传统的WiFi组网技术,Mesh组网更稳定,更快,扩展性更强...

    2024-04-01 06:56:02
  • JAVA大数类 BigInteger和BigDecimal用法

    BigInteger四则运算 import java.math.BigInteger; import java.util.Scanner; public class Main { public static void main(String[] args) { BigInteger num1, num2; Scanner in = new Scanner(S

    2024-04-01 06:55:55
  • 基于ARMA差分还原的客流量时间序列预测 完整代码数据

    基于ARMA差分还原的客流量时间序列预测 完整代码数据

    基于ARMA差分还原的客流量时间序列预测 完整代码数据

    2024-04-01 06:55:47
  • vuex 模块化

    vuex 模块化

    一般当项目比较大时,如果vuex 的modules模块过多,此时需要用到模块化来管理仓库。如果在index里引入modules中所有的文件,需在index.js中配置以下。比如在addController.js中定义一个变量。页面中通过getter取state属性。在getters.js中获取该属性。页面中存state属性。

    2024-04-01 06:55:08
  • tar打包命令(linux)

    1.打包命令: tar -cvf 归档路径 被打包文件路径。 (c--create archive v-verbose f --file ,f指归档路径,故f必须放在其他选项之后,而且-可省略不写) ...

    2024-04-01 06:55:02
  • 零基础怎么入门人工智能?

    零基础怎么入门人工智能?

    免费分享一些我整理的人工智能学习资料给大家,整理了很久,非常全面。包括一些人工智能基础入门视频+AI常用框架实战视频、图像识别、OpenCV、NLQ、YOLO、机器学习、pytorch、计算机视觉、深...

    2024-04-01 06:54:56