千锋教育-做有情怀、有良心、有品质的职业教育机构

当前位置:首页  >  关于学院  >  技术干货  >  html5技术干货  >  正文

vuex数据丢失怎么解决

来源:千锋教育
发布时间:2022-09-23 18:03:00
分享

vuex数据丢失怎么解决

  vuex的 store 中的数据是保存在运行内存中的,当页面刷新时,页面会重新加载 vue 实例,vuex 里面的数据就会被重新赋值,这样就会出现页面刷新vuex中的数据丢失的问题。 如何解决浏览器刷新数据丢失问题呢?

  方法一:手动操作本地存储

  全局监听,页面刷新的时候将 store 里 state 的值存到 sessionStorage 中,然后从sessionStorage 中获取,再赋值给 store ,并移除 sessionStorage 中的数据。在 app.vue 中添加以下代码:

  created() {

  window.addEventListener('beforeunload',()=>{

  sessionStorage.setItem('list', JSON.stringify(this.$store.state))

  })

  

  try{

  sessionStorage.getItem('list') && this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('list'))))

  }catch(err) {

  console.log(err);

  }

  

  sessionStorage.removeItem("list");

  }

  方法二:安装 vuex-persistedstate 插件

  1. npm install vuex-persistedstate -S //安装插件

  2. 在 store/index.js 文件中添加以下代码:

  import persistedState from 'vuex-persistedstate'

  const store = new Vuex.Store({

  state:{},

  getters:{},

  ...

  plugins: [persistedState()] //添加插件

  })

  这时候就需要使用 sessionStorage 进行存储,修改 plugins 中的代码

  plugins: [

  persistedState({ storage: window.sessionStorage })

  ]

声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。

相关推荐

  • vue配置跨域怎么操作 Vue配置跨域的操作非常简单。在Vue项目中,我们可以通过配置webpack来实现跨域请求。在Vue项目的根目录下找到config文件夹,然后打开index.js文件。在该文件中,我们可以找到一个名为
  • npm包管理工具有什么用途? npm(NodePackageManager)是JavaScript生态系统中最常用的包管理工具。它是随同Node.js安装的,默认包含在Node.js的安装包中。npm允许开发者轻松地安装、更新、卸
  • vue事件修饰符有哪些? 在Vue.js中,事件修饰符是一种用于修改事件触发行为的特殊修饰符。以下是常用的事件修饰符:1.`.stop`:阻止事件继续传播,即阻止事件冒泡。2.`.prevent`:阻止事件默认行为。3.`.c
  • vue路由守卫有哪些? 在Vue.js中,路由守卫是一种用于控制导航的机制,它允许您在路由切换前后执行相应的操作。VueRouter提供了三种类型的路由守卫:1.全局前置守卫(GlobalBeforeGuards):-`be
  • css绝对定位和相对定位 CSS中的绝对定位(absolutepositioning)和相对定位(relativepositioning)是用于控制元素在页面布局中的位置的两种常见定位方式。1.绝对定位(absolutepos
  • npm安装less用法介绍 npm(NodePackageManager)是Node.js的包管理器,它允许您安装、管理和共享JavaScript模块。要安装和使用Less(一种CSS预处理器),您可以按照以下步骤进行操作:1.