vuex用户信息的存取

一般来说我们的用户信息都存在vuex里面，但是页面每次刷新都会把vuex里面的数据清空，这样我们页面上的头像，用户信息就没有了，解决这个问题有两种方法，一是我们把用户信息存一份在本地，没有的时候就去本地拿，二是通过路由导航守卫，如果用户信息为空就再调用接口去获取

第一种：

在登录的时候把获取到的用户信息数据setUser（）方法存一份在本地，存一份在vuex里面

本地存储：setUser(JSON.stringify(res.data))

vuex存储：this.$store.commit("SET_USER", res.data); "SET_USER"是vuex里面修改user的方法，res.data是你要存的数据。

把vuex里面的数据和本地数据整合，当页面刷新的时候使用getUser（）方法从本地去拿去数据。

在页面要使用vuex里面的用户信息数据的话就直接 this.$store.state.user 去拿就行了，

import Vue from 'vue'
import Vuex from 'vuex'
import {
    getUser
} from "@/utils/auth.js"


Vue.use(Vuex)


export default new Vuex.Store({
    state: {
        token: "",
        user: ''|| JSON.parse(getUser()),
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token
        },
        SET_USER(state, user) {
            state.user = user
        },
    },
    actions: {},
    getters: {
        user: state => state.user
    }
})

第二种：

在vuex里面的actions里面定义一个获取用户信息的方法，这里面是用过调用用户信息接口获取的用户信息数据，拿到数据后用commit("SET_USERINFO", data) 把数据存在state 的 user里面

actions:{
     // 请求接口获取用户信息
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo()
          .then(({ data }) => {
            commit("SET_USERINFO", data);    
            resolve(data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
}

在路由守卫里面判断如果是登录状态用户信息为空就用this.$store.dispatch("GetInfo")再去获取用户信息

router.beforeEach((to, from, next) => {
  if (getToken() && !store.state.user.userInfo.orgId) {
    store.dispatch("GetInfo");
  }
  next();
});