VUE----解决页面刷新Vuex中的数据清空

我测试使用的是脚手架2
vuex是一个很好用的状态管理模式，但是当我们先将数据保存到store中，然后重新刷新页面会发现store中的数据被重置了，这是因为store中的数据存储在内存之中。
解决办法：既然内存中数据刷新会丢失，那么就可以在刷新的时候将数据保存到本地缓存，下次加载store中的数据时先去缓存中获取，没有缓存再加载默认初始值

1.方法1：

1.1刷新时缓存？？？

我们想要在刷新的时候进行缓存数据操作，我们就需要使用windows的unload事件，我们来看看这个unload事件：

解释截图

我们刷新页面的时候就可以触发这个unload事件，GOOD！！！

1.2何时添加监听事件？？？

我们知道整个vue的生命周期首先在main.js中挂载一堆东西，然后挂载一个app组件，我们很想趁早添加这个unload的事件监听，但是为了保证main.js的简洁性，我们选择将这个监听放在app组件的created钩子函数中

//示例代码..
   methods:{
      //将store中的数据存放到sessionStorage
        saveState() {
          sessionStorage.setItem("state", JSON.stringify(this.$store.state));
        }
    },
    created() {
      //向window添加unload事件
        window.addEventListener("unload", this.saveState);
    }

1.3sessionStorage???

文档截图

1.4修改state数据加载

之前我们一直是每次加载store直接去获取默认值，现在我们需要先去看看缓存中是否有数据

//示例代码：
    const state = sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state'))：{默认值}

1.5现在我们就可以在刷新页面的时候一直能保持store中的数据了

2.方法2：

2.1下载插件：

npm install --save vuex-persistedstate

2.使用示例代码：

import Vue from 'vue'
import Vuex from 'vuex'
import persistedState from 'vuex-persistedstate'

import state                from './state.js'
import mutations        from './mutations.js'
import getters          from './getters.js'

Vue.use(Vuex)

const store = new Vuex.Store({
    plugins: [
      persistedState({ storage: window.sessionStorage })
    ],
    state:state,
    mutations:mutations,
    getters:getters
})
export default store