feat: 修改热门分类请求时机

layouts/module/header/HeaderCategory.vue

@@ -39,7 +39,7 @@
           class="tab-category-menu__right flex-1"
         >
           <div
-            v-for="item in categroyData"
+            v-for="item in list"
             :key="item.id"
             @mouseenter="handleCategoryHover(item.id)"
             class="category-menu-right__wrap"
@@ -61,10 +61,8 @@
   </div>
 </template>
 <script>
-import {
-  ApiGetCategoryOneList,
-  ApiGetCategoryTwoAndGoods,
-} from "@/plugins/api/goods";
+import { mapState } from "vuex";
+import { ApiGetCategoryTwoAndGoods } from "@/plugins/api/goods";
 import { CATEGROY_LEVEL } from "@/constants";
 const CATEGROY_HIDE_PAGES = [/\/account/]; // 隐藏热门分类tab的页面
 
@@ -76,10 +74,11 @@ export default {
       categroyTwoVisible: false, // 是否展示二级分类
       categroyVisible: false, // 是否展示一级分类
       currentCategroyId: 0, // 当前鼠标悬停的一级分类id
-      categroyData: [],
+      list: [],
     };
   },
   computed: {
+    ...mapState(["categroyData"]),
     showCategroyTab() {
       return !CATEGROY_HIDE_PAGES.some((reg) => {
         return reg.test(this.$route.path);
@@ -91,16 +90,21 @@ export default {
       return this.$route.path === "/";
     },
   },
-  created() {
+  watch: {
+    categroyData: {
+      immediate: true,
+      handler(val) {
+        if (val.length > 0) {
           this.getCategroyData();
+        }
+      },
+    },
   },
   methods: {
     // 获取热门分类信息
     async getCategroyData() {
-      const { result } = await ApiGetCategoryOneList();
-      if (result && result.length > 0) {
-        this.categroyData = await Promise.all(
-          result.map(async (item) => {
+      this.list = await Promise.all(
+        this.categroyData.map(async (item) => {
           const { result: resultGoods } = await ApiGetCategoryTwoAndGoods({
             categoryId: item.id,
           });
@@ -112,7 +116,6 @@ export default {
           }
         })
       );
-      }
     },
     // 一级分类鼠标悬停
     handleCategoryHover(id) {

plugins/axiosTk.js

@@ -16,14 +16,14 @@ export default function ({$axios, store, route}, inject) {
 		config.headers.Authorization = store.state.token;
 		return config;
 	});
-	$axiosTk.onResponse(async response => {
+	$axiosTk.onResponse(response => {
 		const result = response.data;
 		if(response.status === 200){
 			if(result.code === 'SUCCESS'){
 				return result.data;
 			}
 			if(result.code === 'TOKEN_FAIL'){
-				await store.commit('setLoginOut');
+				store.commit('setLoginOut');
 				store.commit('setLoginVisible');
 				return result;
 			}

store/index.js

@@ -8,6 +8,7 @@
 import { TOKEN_KEY } from "@/constants";
 import { ApiGetCurrentUser, ApiPostLogout } from "@/plugins/api/account";
 import { ApiGetCartList } from "@/plugins/api/cart";
+import { ApiGetCategoryOneList } from "@/plugins/api/goods";
 const ONE_DAY = 86400000; // 一天的毫秒数 24 * 60 * 60 * 1000;
 
 const state = () => ({
@@ -16,6 +17,7 @@ const state = () => ({
   loginVisible: false, // 是否展示登录弹窗
   seckillTabVisible: false, // 公共头是否展示秒杀tab
   cartProducts: [], // 购物车列表
+  categroyData: [], // 公共页头分类数据
 });
 const mutations = {
   setUserInfo(state, info) {
@@ -42,14 +44,23 @@ const mutations = {
   setCartProducts(state, val) {
     state.cartProducts = val;
   },
+  setCategroyData(state, val) {
+    state.categroyData = val;
+  },
 };
 const actions = {
-  nuxtServerInit({ state, commit, dispatch }) {
+  async nuxtServerInit({ state, commit, dispatch }) {
+    // 设置token数据
     const token = this.$cookies.get(TOKEN_KEY);
     if (!state.token && token) {
       commit("setToken", token);
       dispatch("getUserInfo");
     }
+    // 获取分类数据
+    const { result } = await ApiGetCategoryOneList();
+    if (result) {
+      commit("setCategroyData", result);
+    }
   },
   async getUserInfo({ commit }) {
     const { result } = await ApiGetCurrentUser();