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

 更新时间:2022年07月27日 14:36:53   作者:MO0069  
这篇文章主要介绍了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));
    });
},

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue键盘事件点击事件加native操作

    vue键盘事件点击事件加native操作

    这篇文章主要介绍了vue键盘事件点击事件加native操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vite+ts vite.config.ts使用path报错问题及解决

    vite+ts vite.config.ts使用path报错问题及解决

    这篇文章主要介绍了vite+ts vite.config.ts使用path报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • 在JS中如何同步修改vue中的变量

    在JS中如何同步修改vue中的变量

    这篇文章主要介绍了在JS中如何同步修改vue中的变量问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • vue实现自定义公共组件及提取公共的方法

    vue实现自定义公共组件及提取公共的方法

    这篇文章主要介绍了vue实现自定义公共组件及提取公共的方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • Vue3 reactive响应式赋值页面不渲染的解决

    Vue3 reactive响应式赋值页面不渲染的解决

    这篇文章主要介绍了Vue3 reactive响应式赋值页面不渲染的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue2.0使用过程常见的一些问题总结学习

    Vue2.0使用过程常见的一些问题总结学习

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。
    2017-04-04
  • Vue3实现组件级基类的多种方法

    Vue3实现组件级基类的多种方法

    vue3提供了 mixins和extends,但是尝试之后发现这两种方法只支持纯OptionAPI,设置的data会被识别,但是设置的setup里return 的 reactive,完全无效,setup也没有被执行,这篇文章主要介绍了Vue3实现组件级基类的几种方法,需要的朋友可以参考下
    2023-04-04
  • Vue项目中npm install卡住问题解决的详细指南

    Vue项目中npm install卡住问题解决的详细指南

    这篇文章主要介绍了Vue项目中npm install卡住问题解决的相关资料,文中包括更换npm镜像源、清除npm缓存、删除.npmrc文件和升级Node.js版本,需要的朋友可以参考下
    2024-12-12
  • VUE简单的定时器实时刷新的实现方法

    VUE简单的定时器实时刷新的实现方法

    这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-01-01
  • Vue3中使用pnpm搭建monorepo开发环境

    Vue3中使用pnpm搭建monorepo开发环境

    这篇文章主要为大家介绍了Vue3中使用pnpm搭建monorepo开发环境示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08

最新评论