【已解决】Vue 刷新后用户名消失，store数据丢失

目录

背景

问题

方法一 持久化vuex （不推荐）

方法二 跟本地存储写作

---

背景

登录的时候把用户信息存储到vue.store中，同时页面上也会显示用户名等信息。

问题

当页面刷后，就会发现 用户名 消失了解决

方法一 持久化vuex （不推荐）

感觉蛮好用的， 测试后才发现，太迟久了，我退出浏览器后，用户信息都还留着QAQ

1 安装插件 

npm install vuex-persistedstate --save

 2 加载

在store/index.js中加载插件

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' // vuex持久化

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    ...
  },
  getters: {
    ...
  },
  plugins: [createPersistedState()] // vuex持久化
})

方法二 跟本地存储写作

经过检查发现是，页面刷新后store中数据被清空。

store是用来存储组件状态的。刷新页面时，vue实例重新加载，store会被重置。所以，一些不应该被重置的数据，应该使用本地存储来进行存储。

本地存储

1. cookie: 不适合大量数据的存储。
2. localStorage: 是永久存储，浏览器关闭后数据不会丢失，除非主动删除数据。当关闭页面后重新打开，会读取上一次打开的页面数据。
3. sessionStorage: 在浏览器当前窗口关闭后自动删除。

总结：sessionStorage 比较合适存储用户信息，当浏览器关闭后，自动清楚数据。

beforeunload 会在页面刷新时触发：

  只要监听 beforeunload ，让页面在刷新前将数据存到 sessionStorage 中；

  在页面刷新后，读取 sessionStorage 中的数据到 store 中，即可实现store信息的即时存储。

app.vue

<!--app.vue-->
<template>
</template>

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

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