广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >解决vuex数据丢失问题
  • 119
分享到

解决vuex数据丢失问题

vuex 数据丢失 2023-02-02 12:02:42 119人浏览 泡泡鱼
摘要

目录数据丢失的原因方法1:使用第三方库 Vuex-persistedstate01 store / index.js 之 localStorage02 store / index.j

数据丢失的原因

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

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

方法1:使用第三方库 vuex-persistedstate

npm install --save vuex-persistedstate

01 store / index.js 之 localStorage

- 注意点: vuex-persistedstate默认存储在 localStorage之中,基本上不需要配置什么

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

02 store / index.js 之 sessionStorage

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

 03 store / index.js 之 使用vuex-persistedstate指定需要持久化的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'
         }
     }
 })]
})

方法2 把state的数据先缓存到localStorage之中,页面刷新的时候,拿到数据写入vuex

store / index.js

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",JSON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
})

页面刷新的时候

通过监听beforeunload事件来进行数据的localStorage存储,beforeunload事件在页面刷新时进行触发,具体做法是在App.vue的created()周期函数中下如下代码

if (window.localStorage.getItem("list") ) {
    this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
} 
 
window.addEventListener("beforeunload",()=>{
    window.localStorage.setItem("list",JSON.stringify(this.$store.state))
})

到此这篇关于解决vuex数据丢失问题的文章就介绍到这了,更多相关vuex 数据丢失内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 解决vuex数据丢失问题

本文链接: https://www.lsjlt.com/news/193908.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 解决vuex数据丢失问题
    目录数据丢失的原因方法1:使用第三方库 vuex-persistedstate01 store / index.js 之 localStorage02 store / index.j...
    99+
    2023-02-02
    vuex 数据丢失
  • 关于vuex强刷数据丢失问题的解决方法
    这篇文章主要讲解了“关于vuex强刷数据丢失问题的解决方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“关于vuex强刷数据丢失问题的解决方法”吧!vuex-persistedstate核心...
    99+
    2023-06-14
  • 关于vuex强刷数据丢失问题解析
    vuex-persistedstate 核心原理:在本地存储中存入所有的vuex数据,页面刷新时到缓存中取数据,放到vuex中 下载:$ npm install ...
    99+
    2022-11-12
  • 解决vue页面刷新vuex中state数据丢失的问题
    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决。 1、lo...
    99+
    2022-11-13
  • vuex结合session存储数据解决页面刷新数据丢失问题
    目录前言一、原因:二、解决思路:1.本地存储方法:2.实现步骤:3.优化:前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上。 在项目中是使用vue...
    99+
    2022-11-12
  • vuex页面刷新数据丢失问题的四种解决方式
    目录为什么说刷新页面vuex的数据会丢失第一种方法用sessionStorage第二种方法是 vuex-along示例如下第三种方法是 vuex-persistedstate示例如下...
    99+
    2022-11-13
  • vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题
    目录为什么刷新之后vuex的状态就没了?常见的解决方案完美方案是利用sessionStorage/localStorage主要是针对mutations和getters如何让vuex数...
    99+
    2022-11-13
  • vuex页面刷新数据丢失怎么解决
    今天小编给大家分享一下vuex页面刷新数据丢失怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。为什么说刷新页面vuex...
    99+
    2023-06-29
  • 解决docker重启redis,mysql数据丢失的问题
    官方文档: 所以 mysql应如下启动: docker run -p 3306:3306 -d -e MYSQL_ROOT_PASSWORD=密码 -v /windows盘符/指定的文件夹路径:/var/lib/...
    99+
    2022-05-24
    docker 重启redis mysql 数据丢失
  • Mybatis查询时数据丢失的问题及解决
    目录Mybatis查询时数据丢失经过排查得出结论解决办法Mybatis查询部分字段漏查问题(mysql)Mybatis查询时数据丢失 公司里的实体类和mapper文件均由mybati...
    99+
    2022-11-13
  • 如何解决Sybase数据库sa密码丢失问题
    这篇文章主要讲解了“如何解决Sybase数据库sa密码丢失问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Sybase数据库sa密码丢失问题”吧!...
    99+
    2022-10-18
  • 如何解决Mybatis查询时数据丢失的问题
    这篇文章主要为大家展示了“如何解决Mybatis查询时数据丢失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决Mybatis查询时数据丢失的问题”这篇文章吧。Mybatis查询时数据...
    99+
    2023-06-28
  • 解决java.sql.Timestamp丢失精度的问题
    目录java.sql.Timestamp丢失精度需要重新补偿java.sql.Timestamp类的使用1. 获取当前时间2.String类型转换为Timestamp3.Timest...
    99+
    2022-11-12
  • springboot Long 精度丢失问题解决
    目录前言解决方法基于注解@JsonSerialize(不推荐)基于jackson全局配置(不推荐)使用JsonComponent 序列化配置WebMvcConfigurationSu...
    99+
    2022-11-13
  • 如何解决jqGrid翻页时数据选中丢失问题
    小编给大家分享一下如何解决jqGrid翻页时数据选中丢失问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!我在项目中使用jqGr...
    99+
    2022-10-19
  • 如何解决页面刷新vuex数据消失的问题
    这篇文章主要为大家展示了“如何解决页面刷新vuex数据消失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决页面刷新vuex数据消失的问题”这篇文章吧...
    99+
    2022-10-19
  • 怎么解决curl php post 丢失问题
    本篇内容主要讲解“怎么解决curl php post 丢失问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么解决curl php post 丢失问题”吧!php curl post数据丢失是...
    99+
    2023-06-20
  • 如何解决php 请求丢失问题
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑如何解决php 请求丢失问题?php curl post请求丢失'+'问题背景: 使用与友商做免登录授权的跳转,发现授权偶尔失败,经过日志查看,加密码中带...
    99+
    2017-06-12
    php
  • PHP如何解决丢失SESSION的问题
    小编给大家分享一下PHP如何解决丢失SESSION的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.1  丢失S...
    99+
    2022-10-19
  • mq消息丢失问题如何解决
    这篇“mq消息丢失问题如何解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“mq消息丢失问...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作