vuex存储数据，刷新页面后导致数据丢失【亲测可用，可供参考】

问题描述

使用vuex存储全局数据后，刷新浏览器页面导致数据丢失

原因分析

• 刷新页面时，vue实例重新加载，因此导致store也随之被重置
• store是用来存储组件状态的，而不是用来做本地数据存储的
• 对于不希望页面刷新之后被重置的数据，推荐使用本地存储来进行存储

解决方式

• 本地存储

  cookie： 不适合存储较大的数据 （一段不超过4KB的小型文本数据）

  localStorage： 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除（永久存储）

  sessionStorage： 临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据（推荐）

• 推荐方式

  • 通过监听 beforeunload 方法（页面刷新时触发），且将在页面刷新前将数据存到 sessionStorage 中
  • 在页面刷新时，将从 sessionStorage 中读取到的数据添加到 store 中

以下示例代码请在 App.vue 中操作

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  created() {
    // 在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem('store'))
        )
      )
    }

    // 页面刷新时，将vuex里的信息保存到sessionStorage
    // 在页面刷新时先触发beforeunload事件
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  },
}
</script>

:: 更多内容 ::

> 开发过程中踩坑经验记录