把用户信息存到vuex state

src/store/getters.js

@@ -10,6 +10,7 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   device: state => state.app.device,
-  token: state => state.user.token
+  token: state => state.user.token,
+  name: state => state.user.userInfo.username
 }
 export default getters

src/store/modules/user.js

@@ -2,7 +2,7 @@
 import { getToken, setToken, removeToken } from '@/utils/auth'
 
 // 导入登录api
-import { login } from '@/api/user'
+import { getUserInfo, login } from '@/api/user'
 
 // import { resetRouter } from '@/router'
 
@@ -103,7 +103,8 @@ import { login } from '@/api/user'
 // 初始化的时候从缓存中读取状态 并赋值到初始化的状态上
 const state = {
   // 2. 页面刷新初始化时, 尝试恢复
-  token: getToken()
+  token: getToken(),
+  userInfo: {} // 不同组件共享用户信息
 }
 // 修改状态
 const mutations = {
@@ -120,14 +121,29 @@ const mutations = {
   removeToken(state) {
     state.token = null // 删除vuex的token
     removeToken() // 先清除 vuex  再清除缓存 vuex和 缓存数据的同步
+  },
+  // 存储用户信息
+  setUserInfo(state, data) {
+    state.userInfo = { ...data }
+  },
+  // 删除用户信息
+  removeUserInfo(state) {
+    state.userInfo = {}
   }
 }
 // 执行异步
 const actions = {
+  // 登录
   async login({ commit }, data) {
     const res = await login(data)
     console.log('将登录页的逻辑移动到 vuex 里面')
     commit('setToken', res)
+  },
+  // 获取用户信息
+  async getUserInfo({ commit }) {
+    const res = await getUserInfo()
+    commit('setUserInfo', res)
+    return res
   }
 }
 

src/views/dashboard/index.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import { getUserInfo } from '@/api/user'
+// import { getUserInfo } from '@/api/user'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -16,9 +16,10 @@ export default {
     ])
   },
   created() {
-    getUserInfo().then(res => {
-      console.log(res)
-    })
+    // getUserInfo().then(res => {
+    //   console.log(res)
+    // })
+    this.$store.dispatch('user/getUserInfo')
   }
 }
 </script>