VueX浏览器刷新如何实现保存数据

目录
  • VueX浏览器刷新保存数据
    • 方法一
    • 方法二
  • 刷新浏览器后,Vuex的数据丢失,如何解决？
    • 解决方法

VueX浏览器刷新保存数据

在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

原因：

因为当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化

方法一

在 App.vue 的 created 钩子函数里写下了如下代码;

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

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

方法二

router/router.js 下

setItem()

刷新getItem()

刷新浏览器后,Vuex的数据丢失,如何解决？

在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

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

解决方法

使用vuex-along

vuex-along 的实质是将 vuex 中的数据存放到 localStorage 或者 sessionStroage 中。

安装vuex-along

npm install vuex-along --save

配置 vuex-along: 在 store/index.js 中最后添加以下代码:

import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
    //modules: {
        //controler  //模块化vuex
    //},
    plugins: [VueXAlong({
        name: 'store',     //存放在localStroage或者sessionStroage 中的名字
        local: false,      //是否存放在local中  false 不存放 如果存放按照下面session的配置
        session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时， list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
    })]
});

使用localStorage 或者 sessionStroage

created() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
        )
      );
    }
    //在页面刷新时将vuex里的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
},

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuex页面刷新数据丢失问题的四种解决方式

    目录 为什么说刷新页面vuex的数据会丢失 第一种方法用sessionStorage 第二种方法是 vuex-along 示例如下 第三种方法是 vuex-persistedstate 示例如下 第四种方法是 vuex-persist 示例如下 结语: 为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了. 第一种方法用sess

  • 解决vuex数据页面刷新后初始化操作

    在vue项目的开发中经常会用到vuex来进行数据的存储,然而在开发过程中会出现刷新后页面的vuex的state数据初始化问题!下面是我用过的解决方法 1.利用storage缓存来实现vuex数据的刷新问题 我们可以在mutation等vuex的方法中对于数据进行改变时,将数据同时存储进我们的本地浏览器缓存中:下面是我在mutation中写的方法: 同步将数据的更改保存,也可以在页面调用vuex的mutation方法时同步更改:但是这种方法只能针对少量的数据需要保持不刷新,在真正的卡发中并不适用

  • vuex页面刷新导致数据丢失的解决方案

    解决vuex页面刷新导致数据丢失问题 vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失.我们有两种方法解决该问题: 1.使用vuex-along 2.使用localStorage或者sessionStroage 1.使用vuex-along vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中,只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方

  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将

  • VueX浏览器刷新如何实现保存数据

    目录 VueX浏览器刷新保存数据 方法一 方法二 刷新浏览器后,Vuex的数据丢失,如何解决? 解决方法 VueX浏览器刷新保存数据 在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值初始化 方法一 在 App.vue 的 created 钩子函数里写下了如下代码; //在页面加载时读取localStorage里的状态信息 localStorage.g

  • 详解vuex持久化插件解决浏览器刷新数据消失问题

    众所周知,vuex的一个全局状态管理的插件,但是在浏览器刷新的时候,内存中的state会释放,通常的解决办法就是用本地存储的方式保存数据,然后再vuex初始化的时候再赋值给state,手动存再手动取会觉得很麻烦,这个时候就可以使用vuex的插件vuex-solidification 插件地址: vuex-solidification, 欢迎star 插件原理 vuex有一个hook方法:store.subscribe((mutation, state) => {}) 每次在mutation方法执

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

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

  • vue单页应用在页面刷新时保留状态数据的方法

    在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉.这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你 一.问题 现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致. 这时候就需要我们保存刷新之前页面的状态. 二.一种解决方案 在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里. 即:一改变vuex里的

  • jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据

    废话不多说了,直接给大家贴代码了. 关键代码如下所示: /// 最近一次使用编辑行 一切正常 ///<summary> ///初始化数据容器 ///</summary> function InitGrid(){ var lastIndex; $("#grid").datagrid({ url:'', loadMsg:'数据加载中,请稍后......', border:false, fitColumns:true, remoteSort:false, onDblC

  • asp javascript 实现关闭窗口时保存数据的办法

    关闭窗口时保存数据的办法 <SCRIPT language="javascript">  function IfWindowClosed()  {   var win = null;  try  {  window.opener.name = "ss";  if ( window.opener.name != "ss" )  {  win = window.open("quit.asp","",

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • sql server动态存储过程按日期保存数据示例

    在项目中经常有大量数据信息保存到数据库,如只用一张表保存那肯定不现实,首选解决方案为按日期建立动态表来保存数据.在不改变保存方式的代码的情况下,用动态存储过程是首选,在sql server存储过程中进行日期计算,按日期建表效率最高,下面就公司项目的部分动态存储过程粘贴出来: -----sql语句: ALTER proc [dbo].[EventInsert] @chrTagData varchar(50), --编号 @intEData int, @chrJZData varchar(50),

随机推荐