vue开发中状态管理在一个复杂的应用中可以说是必须存在，那么关于状态管理你是否发现当你刷新时，store数据丢失的问题。

关于store的数据丢失，我们要如何处理呢？本文就网上常见的方式进行整理。

方案一：

APP.js中加入以下代码：

export default {
  name: 'app',
  created () {
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    })
  }
}

该解决方法，在我们搜索能看到最多且使用量最大。但对我在项目中，发现该方式并不适用，于是就有了第二种方式

方案二：

APP.js中加入以下代码：

mounted() {
  window.addEventListener('unload', this.saveState)
},
methods: {
  saveState() {
    sessionStorage.setItem('state', JSON.stringify(this.$store.state))
  },
},

更改 store.js 文件 state 的定义

state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
  userData: {'你定义的state'}
},

结语：对比两种方式，个人更推荐方案二。方案一在使用中你会发现，如果你routerbefore是根据store中的数据来进行判断是否登录等操作，那么在你使用方案一的情况下刷新会在你store还没存储前就执行了跳转，这个时候你如果在登录成功页面下会跳转到你设定的未登录的指定页面去。