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处理emoji表情占位符的操作方法

    vue处理emoji表情占位符的操作方法

    在计算字符数时,一般情况下,英文字符、数字和大部分符号都可以被视为占一个字符长度,因为它们是单个字节,然而,对于某些特殊字符,如表情符号和部分非英文字符,会被认为占据了多个字符长度,本文给介绍了vue处理emoji表情占位符的操作方法,需要的朋友可以参考下
    2024-06-06
  • Vue如何设置el-table背景透明样式

    Vue如何设置el-table背景透明样式

    本文主要介绍了Vue如何设置el-table背景透明样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 创建和运行Vue.js项目方法demo

    创建和运行Vue.js项目方法demo

    这篇文章主要为大家介绍了创建和运行Vue.js项目方法demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 详解处理Vue单页面应用SEO的另一种思路

    详解处理Vue单页面应用SEO的另一种思路

    这篇文章主要介绍了详解处理Vue单页面应用SEO的另一种思路,本文主要针对 vue 2.0 单页面 Meta SEO 优化展开介绍,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • 详解vue-cli@2.x项目迁移日志

    详解vue-cli@2.x项目迁移日志

    这篇文章主要介绍了详解vue-cli@2.x项目迁移日志,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • vue实现组件之间传值功能示例

    vue实现组件之间传值功能示例

    这篇文章主要介绍了vue实现组件之间传值功能,结合实例形式分析了vue.js父子组件之间相互传值常见操作技巧,需要的朋友可以参考下
    2018-07-07
  • Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

    Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明

    这篇文章主要介绍了Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue项目判断开发、测试、正式环境过程

    Vue项目判断开发、测试、正式环境过程

    这篇文章主要介绍了Vue项目判断开发、测试、正式环境过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue axios post发送复杂对象问题

    vue axios post发送复杂对象问题

    现在vue项目中,一般使用axios发送请求去后台拉取数据。这篇文章主要介绍了vue axios post发送复杂对象的一点思考,需要的朋友可以参考下
    2019-06-06
  • vue中选中多个选项并且改变选中的样式的实例代码

    vue中选中多个选项并且改变选中的样式的实例代码

    这篇文章主要介绍了vue中选中多个选项并且改变选中的样式,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-09

最新评论