在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中写上这几行代码，
//在页面加载时读取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种方法的本质是一样，而且第一种方法的代码少，还不用下载插件，个人推荐使用这样。
