页面刷新 Vuex 数据丢失

用 Vuex 的时候发现一个问题，在页面刷新的时候 vuex 的 state 里面存储的数据会丢失。

问题产生原因：

因为 store 里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载 vue 实例，store 里面的数据就会被重新赋值。

解决思路：

既然刷新后就会消失那这里就有两种解决方案，一种是刷新后重新获取一次数据，一种是想办法让数据一直存在，刷新后也不消失（除非用户主动退出登录）

解决过程：

1、在页面刷新后重新请求接口获取相关数据，先通过 Promise.all 获取请求状态，当需要的数据返回后，再通过触发 action 或 mutation 来进行重新赋值。数据量小的时候可以解决问题，但是有一个弊端，当获取数据量大的时候，需要调用接口太多的时候页面加载时间过长，用户体验不够友好。如果不用 Promise 阻塞页面渲染，则容易出现因页面数据缺失导致的渲染问题。而且不断刷新页面会导致过多重复请求，简单来说就是可以但没必要。

2、在页面刷新时先将数据保存到 localStorage 或者 sessionStorage 中，页面刷新后直接从存储里面读取数据再通过触发 action 或 mutation 来进行重新赋值。这种方法相对第一种或许会更好一点，具体做法可以参考这一篇文章：vuex解决刷新页面丢失数据

也可以通过插件 vuex-persistedstate 实现数据持久化。

vuex-persistedstate 使用方法：

安装：npm install vuex-persistedstate --save

在store下的index.js中，引入并配置

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate";

Vue.use(Vuex);

export default new Vuex.Store({

    /**
     * 默认是放本地存储
     */
    plugins: [createPersistedState()]

    /**
     * 也可通过配置修改存储位置，可以是 localStorage / sessionStorage / cookie
     * 此处以存储到 sessionStorage 为例
     */
    plugins: [createPersistedState({
        storage: window.sessionStorage
    })]

    /**
     * 可以存储指定 state
     */
    plugins: [createPersistedState({
        storage: window.sessionStorage,
        reducer(val) {
            return {
                // 只储存state中的user
                user: val.user
            }
        }
    })]

})