iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > 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数据丢失问题

本文链接: http://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-persistedstate 核心原理:在本地存储中存入所有的vuex数据,页面刷新时到缓存中取数据,放到vuex中 下载:$ npm install ...
    99+
    2024-04-02
  • 关于vuex强刷数据丢失问题的解决方法
    这篇文章主要讲解了“关于vuex强刷数据丢失问题的解决方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“关于vuex强刷数据丢失问题的解决方法”吧!vuex-persistedstate核心...
    99+
    2023-06-14
  • 解决vue页面刷新vuex中state数据丢失的问题
    页面刷新后,原有的 vuex 中的 state 会发生改变,如果在页面刷新之前,可以将 state 信息保存,页面重新加载时,再将该值赋给 state,那么该问题即可解决。 1、lo...
    99+
    2024-04-02
  • vuex刷新之后数据丢失,数据持久化,vuex-persistedstate问题
    目录为什么刷新之后vuex的状态就没了?常见的解决方案完美方案是利用sessionStorage/localStorage主要是针对mutations和getters如何让vuex数...
    99+
    2024-04-02
  • vuex结合session存储数据解决页面刷新数据丢失问题
    目录前言一、原因:二、解决思路:1.本地存储方法:2.实现步骤:3.优化:前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上。 在项目中是使用vue...
    99+
    2024-04-02
  • vuex页面刷新数据丢失问题的四种解决方式
    目录为什么说刷新页面vuex的数据会丢失第一种方法用sessionStorage第二种方法是 vuex-along示例如下第三种方法是 vuex-persistedstate示例如下...
    99+
    2024-04-02
  • vuex页面刷新数据丢失怎么解决
    今天小编给大家分享一下vuex页面刷新数据丢失怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。为什么说刷新页面vuex...
    99+
    2023-06-29
  • Mybatis查询时数据丢失的问题及解决
    目录Mybatis查询时数据丢失经过排查得出结论解决办法Mybatis查询部分字段漏查问题(mysql)Mybatis查询时数据丢失 公司里的实体类和mapper文件均由mybati...
    99+
    2024-04-02
  • 如何解决页面刷新vuex数据消失的问题
    这篇文章主要为大家展示了“如何解决页面刷新vuex数据消失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决页面刷新vuex数据消失的问题”这篇文章吧...
    99+
    2024-04-02
  • 如何解决Sybase数据库sa密码丢失问题
    这篇文章主要讲解了“如何解决Sybase数据库sa密码丢失问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何解决Sybase数据库sa密码丢失问题”吧!...
    99+
    2024-04-02
  • 如何解决Mybatis查询时数据丢失的问题
    这篇文章主要为大家展示了“如何解决Mybatis查询时数据丢失的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决Mybatis查询时数据丢失的问题”这篇文章吧。Mybatis查询时数据...
    99+
    2023-06-28
  • PHP参数丢失问题的解决方案
    PHP参数丢失问题的解决方案 在开发PHP程序的过程中,经常会遇到参数丢失的问题,这可能是由于前端传递的参数不完整、后端接收参数的方式不正确等原因造成的。在本文中,我们将针对PHP参数...
    99+
    2024-03-11
    数据恢复 解析错误 参数处理 表单提交
  • 如何解决jqGrid翻页时数据选中丢失问题
    小编给大家分享一下如何解决jqGrid翻页时数据选中丢失问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!我在项目中使用jqGr...
    99+
    2024-04-02
  • 解决java.sql.Timestamp丢失精度的问题
    目录java.sql.Timestamp丢失精度需要重新补偿java.sql.Timestamp类的使用1. 获取当前时间2.String类型转换为Timestamp3.Timest...
    99+
    2024-04-02
  • springboot Long 精度丢失问题解决
    目录前言解决方法基于注解@JsonSerialize(不推荐)基于jackson全局配置(不推荐)使用JsonComponent 序列化配置WebMvcConfigurationSu...
    99+
    2024-04-02
  • 租用服务器发生数据丢失问题怎么解决
    租用服务器发生数据丢失问题可能是由多种原因引起的,例如硬件故障、人为操作失误、网络问题等。以下是一些解决方法: 数据备份:在租用...
    99+
    2024-04-23
    服务器
  • 租用服务器发生数据丢失问题如何解决
    租用服务器发生数据丢失问题的解决方法:1、采用raid磁盘阵列存储,加强服务器的磁盘容错功能,能第一时间恢复正常操作;2、做好日常定期数据备份,能有效降低数据的丢失,采用专门的硬盘备份,以便携带;3、减少非必要的错误操作,不要随意进行不了解...
    99+
    2024-04-02
  • 如何解决ajax跨域请求数据cookie丢失的问题
    本篇内容介绍了“如何解决ajax跨域请求数据cookie丢失的问题”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有...
    99+
    2024-04-02
  • PHP如何解决丢失SESSION的问题
    小编给大家分享一下PHP如何解决丢失SESSION的问题,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1.1  丢失S...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作