通常在vue项目中使用vuex做全局的状态管理，但是刷新之后，vuex中的数据会丢失

因为store是存储在运行内存中，当浏览器刷新时，会重新加载vue实例，store也会重新赋值

通常将一些数据保存在localstorage、sessionstorage或cookie中，可以保证页面刷新数据不丢失且易于读取。

vue项目一般操作都在同一个页面跳转路由，所以使用sessionstorage进行存储

1.vue项目刷新，app.vue会重新加载，在created中获取之前保存过的数据，使用vuex.store的replaceState方法，替换store的根状态

2.在浏览器刷新前将store中的数据保存在sessionstorage

 created(){
      if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store"))))
      }

      window.addEventListener("beforeunload",()=>{
        sessionStorage.setItem("store",JSON.stringify(this.$store.state))
      })
    }

 改变store中的数据，并刷新

也可以直接使用vuex-persistedstate来保存状态(保存在localstorage)

npm install --save vuex-persistedstate

在store.js中添加两行配置

import Vue from 'vue'
import Vuex from 'vuex'

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
   //...
   plugins: [createPersistedState()]
})