解决刷新页面vuex数据获取不到的问题

现象：

一进入页面可以在mounted中获取到vuex中的数据，

mounted() {
	console.log('🚀 ~ this.$store.state.user.companyId', this.$store.state.user.companyId);
}

但是刷新页面后就获取不到了。

解释：

刷新页面vue实例重新加载，store被重新赋值，要想存储数据就必须存储在外部。

解决思路：

在用户登录之后，获取到用户信息，在存储store数据的同时，再存储到localStorage中。
vuex中的变量是响应式的，而localStorage中的变量不是，当vuex变量改变时，相应的组件也会得到更新，而localStorage不会，除非操作localStorage的数据，所以应该让vuex中的状态从localStorage中得到。

代码：

1）store -> index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {
        user: JSON.parse(localStorage.getItem('userData')) || {} // 用户信息
    },
    mutations: {
        // 设置用户 信息
        setUser(state, val) {
            localStorage.setItem('userData', JSON.stringify(val));
            state.user = val;
        }
    },
    actions: {
        // 更新 用户信息
        updateUser({ commit }, val) {
            commit('setUser', val);
        }
    }
});

2）vue组件中
可以使用mapState辅助函数来帮我们生成计算属性。

import { mapState } from 'vuex';
export default {
	computed: {
        ...mapState({
            user: state => state.user
        })
    },
    mounted() {
		console.log('🚀 ~ this.$store.state.user.companyId', this.$store.state.user.companyId);
	}
}