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

更新时间：2020年12月10日 10:53:31 作者：Killerbee

这篇文章主要介绍了vuex页面刷新导致数据丢失的解决方案，帮助大家更好的使用vue框架，感兴趣的朋友可以了解下

解决vuex页面刷新导致数据丢失问题

vuex数据是存在内存当中，当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage

1.使用vuex-along

vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中，只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方法。

安装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中
  })]
});

2.使用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));
  });
},

上面两种方法都可以解决vuex页面刷新导致数据丢失问题。按照上面的方法配置之后就可以正常使用vuex了，页面刷新数据也不会丢失了。

以上就是vuex页面刷新导致数据丢失的解决方案的详细内容，更多关于vuex 数据丢失的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

vue中v-bind和v-model的区别详解
v-bind和v-model是Vue.js中的两个常用指令,它们在功能和用途上有一些区别,接下来小编就给大家具有讲讲vue中v-bind和v-model区别,感兴趣的同学跟着小编一起来看看吧
2023-08-08
Vue3中refs使用方法举例
在Vue中Refs是对DOM元素或已安装到DOM的其他组件实例的引用,下面这篇文章主要给大家介绍了关于Vue3中refs使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-08-08
vue.js 图片上传并预览及图片更换功能的实现代码
这篇文章主要介绍了vue.js 图片上传并预览及图片更换功能，小编主要围绕我们日常使用功能的例子做讲解，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-08-08
c++游戏教程使用easyx做出大飞机
这篇文章主要为大家介绍了c++游戏教程使用easyx实现大飞机示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08
vue3中实现组件通信的方法总结
在Vue3中，有多种方法可以实现组件之间的通信，本文就通过代码示例给大家总结一些vue3实现组件通信的常用方法,需要的朋友可以参考下
2023-06-06
vue.js表格分页示例
这篇文章主要为大家详细介绍了vue.js表格分页示例，ajax异步加载数据，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
一文详解如何在Vue3中使用jsx/tsx
本篇文章旨在带领大家快速了解和使用 Vue 中的 JSX 语法,好让大家在 Vue 中遇到或使用 JSX 的时候能很快入手，感兴趣的小伙伴可以跟随小编一起学习一下
2023-03-03
Vue中的element tabs点击锚点定位,鼠标滚动定位
这篇文章主要介绍了Vue中的element tabs点击锚点定位,鼠标滚动定位方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue弹窗父子组件调用问题示例详解
这篇文章主要介绍了vue弹窗父子组件调用问题，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-08-08
vue实现路由监听和参数监听
今天小编就为大家分享一篇vue实现路由监听和参数监听，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10