解决 vuex 中的数据在页面刷新之后就丢失的问题

在vue的项目中我们一般都会使用到vuex，在vuex中我们会保存一个需要全局使用的变量或者状态，这样方便我们使用。但是vuex的store中的数据有一个特性，那就是在页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值，这样就会出现页面刷新vuex中的数据丢失的问题。

下面是个人总结的一些解决这个问题的方法：

1、利用js存储技术（localStorage、sessionStorage、cookie）来进行处理

2、使用一些vue的插件，例如 vuex-persistedstate ，实际上其根本原理就是将vuex中的state存在 localStorage或者sessionStorage中，在页面刷新之后vuex在从 localStorage中把数据拿回来

这里我分别说明一下这2中方法的使用方式：

第一种：（个人推荐使用）

在App.vue中写上这几行代码，

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))
    })
},

这样就能在页面刷新时把store的数据存到sessionStorage中，并且在页面加载时及时获取到数据。

这里之所以使用sessionStorage，是因为sessionStorage的存在时间是当页面打开时存在，页面一关闭就会自动清除，能保证下次一进来页面使用的仍是新数据，不是上次存储的数据。

第二种：

首先安装插件，

npm install vuex-persistedstate  --save

然后在store的index.js中写上下面这些代码

import createPersistedState from "vuex-persistedstate"

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

此时可以使用sessionStorage 把数据存储起来，

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

这样我们就把vuex中的数据存储起来了，同样我们在页面加载时再次把sessionStorage中的数据存到vuex中，就可以了。

其实这2种方法的本质是一样，而且第一种方法的代码少，还不用下载插件，个人推荐使用这样。