优化个人中心数据加载逻辑

.env.example

@@ -1,6 +1,8 @@
 NODE_ENV=production
 BASE_URL=/
 
+VUE_APP_VUEX_KEY=vuex
+
 VUE_APP_TITLE=Jason.Chen
 VUE_APP_API_URL=/api
 

src/App.vue

@@ -5,13 +5,15 @@
     </keep-alive>
   </router-view>
 
-  <router-link :to="{name:'Home'}">Home</router-link>
-  |
-  <router-link :to="{name:'User'}">User</router-link>
-  |
-  <router-link :to="{name:'AuthLogin'}">Login</router-link>
-  |
-  <router-link :to="{name:'AuthRegister'}">Register</router-link>
+  <div>
+    <router-link :to="{name:'Home'}">Home</router-link>
+    |
+    <router-link :to="{name:'User'}">User</router-link>
+    |
+    <router-link :to="{name:'AuthLogin'}">Login</router-link>
+    |
+    <router-link :to="{name:'AuthRegister'}">Register</router-link>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -30,8 +32,6 @@ if (search && search.indexOf('?') !== -1) {
   invite && localStorage.setItem(INVITE_CODE, invite)
 }
 
-// console.log(
-
 watch(route, (to: RouteLocationNormalizedLoaded) => {
   if (to.meta?.keepAlive && includeList.value.indexOf(to.name as string) === -1) {
     includeList.value.push(to.name as string)

src/store/index.ts

@@ -6,7 +6,7 @@ import createPersistedState from 'vuex-persistedstate'
 import auth, { AuthState } from './modules/auth'
 import refresh, { RefreshState } from './modules/refresh'
 
-export const PERSISTED_KEY = 'vuex_persisted'
+export const PERSISTED_KEY = process.env.VUE_APP_VUEX_KEY
 export const INVITE_CODE = 'invite_code'
 
 export const key: InjectionKey<Store<State>> = Symbol()

src/utils/request.ts

@@ -35,7 +35,7 @@ request.interceptors.response.use(async (response) => {
     }
 
     if (response.status === 200 && response.data?.status_code === 200) {
-        return response.data?.data
+        return Promise.resolve(response.data?.data)
     }
 
     return Promise.reject(response.data)

src/views/User/index.vue

@@ -18,19 +18,14 @@ export default {
 import { user } from '@/api'
 import { useStore } from '@/store'
 import type { BaseInfo, UserIndex } from '@/types/user'
-import { onActivated, onMounted, ref } from 'vue'
+import { onActivated, ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 
 const store = useStore()
 const router = useRouter()
-const info = ref<BaseInfo>({})
+const info = computed<BaseInfo>(() => store.getters.userInfo)
 const data = ref<UserIndex>({})
 
-onMounted(() => {
-  info.value = store.getters.userInfo
-  loadUserData()
-})
-
 onActivated(() => {
   if (store.getters['refresh/user']) {
     loadUserData()