feat: 导航配置的获取从ssr修改为异步,解决同一个页面在不同导航配置应用的问题,并解决修改无效等问题

app/controller/activity.ts

@@ -8,15 +8,15 @@ export default class ActivityController extends Controller {
     if (process.env.NODE_ENV === 'development') {
         body = await ctx.renderToHtml('activity.js', { url: ctx.url, apollo });
     } else {
-      // const redisKey = `quantum-blocks:page:${ctx.params.id}`;
-      // body = await ctx.service.redis.get(redisKey);
-      // if (body) {
-      //   ctx.logger.info('请求redis成功 key: %j', redisKey);
-      // }
-      // if (!body) {
+      const redisKey = `quantum-blocks:page:${ctx.params.id}`;
+      body = await ctx.service.redis.get(redisKey);
+      if (body) {
+        ctx.logger.info('请求redis成功 key: %j', redisKey);
+      }
+      if (!body) {
         body = await ctx.renderToHtml('activity.js', { url: ctx.url, apollo });
-        // await ctx.service.redis.set(redisKey, body);
-      // }
+        await ctx.service.redis.set(redisKey, body);
+      }
     }
     ctx.body = body;
   }

app/web/page/activity/view/activity/index.ts

@@ -18,6 +18,7 @@ import { home, shopcart, user } from '@/config/nav.config';
 import { isWxMp, isApp } from '@/service/utils.service';
 import Bridge from '@qg/js-bridge';
 import MpBridge from '@qg/citrus-ui/src/helper/service/mp';
+import navigatorApi from '@/api/navigator.api';
 @Component({ components: { FreedomContainer, GridLayout, GridItem, PageBottomTip, BackTop, EmptyState }, name: 'Activity'})
 export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyleMixin, SaMixin, DisableTouchMixin) {
 
@@ -27,8 +28,6 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
   @State(state => state.activity.pageInfo.appLoginState) appLoginState;
   @State(state => state.activity.pageInfo.tenantId) tenantId;
   @State(state => state.activity.gridLayout.rowHeight) rowHeight;
-  @State(state => state.activity.navigatorConfig) navigatorConfig;
-  @State(state => state.activity.navIndex) navIndex;
   @Mutation('SET_PAGE_ELEMENTS') setPageElement;
   @Mutation('UPDATE_APP_LOGIN_STATE') updateAppLoginState;
 
@@ -43,6 +42,8 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
   };
   isLayoutComReady = false;
   showBackTop = false;
+  navIndex = 0;
+  navigatorConfig = null;
   targetEle: HTMLElement | null = null;
   loading: boolean = true;
   modfiTabsStyleDebounce = debounce(this.modfiTabsStyle, 300);
@@ -131,20 +132,25 @@ export default class Activity extends Mixins(TransformStyleMixin, BottomNavStyle
           }
         }
       });
+      console.log(this.$route);
+      // 获取导航配置，不走redis改异步是因为页面缓存会把导航部分也缓存进去
+      const {navId, index} = this.$route.query;
+      if (navId && index) {
+        this.getNavigatorConfig(navId, index);
+      }
     }
     this.layoutReadyEvent();
   }
+  async getNavigatorConfig(navId, index) {
+    // 获取导航配置
+    const [res] = await navigatorApi.getDetailById(navId);
+    this.navigatorConfig = res;
+    this.navIndex = index;
+    // console.log(res, 'a123');
+  }
   async fetchApi(options) {
     const { store, route } = options;
     const { pageId } = route.params;
-    const { navId, index } = route.query;
-    // editor.navIndex = index ? index : -1;
-    if (navId) {
-      await store.dispatch('getNavigationConfig', navId);
-    }
-    if (index) {
-      await store.dispatch('setNavIndex', index);
-    }
     return store.dispatch('getPageDate', { pageId });
   }
   updateShopCartCount() {

app/web/page/store/modules/activity/index.ts

 import api from '@/api/editor.api';
-import navigatorApi from '@/api/navigator.api';
 import { Module, GetterTree, ActionTree, MutationTree } from 'vuex';
 import Vue from 'vue';
-import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT, UPDATE_APP_LOGIN_STATE, SET_EMPTY_PAGE, SET_PAGE_NAVIGATOR_DATA, SET_PAGE_NAVIGATOR_INDEX } from './type';
+import { UPDATE_PAGE_INFO, SET_PAGE_INFO, SET_PAGE_DATA, SET_PAGE_ELEMENTS, SET_ELEMENT_POINT, UPDATE_APP_LOGIN_STATE, SET_EMPTY_PAGE } from './type';
 
 import RootState from '../../state';
 import EditorState, { PageInfo, defaultState, Page, PageElement } from './state';
@@ -30,13 +29,6 @@ export default class EditorModule implements Module<EditorState, RootState> {
         commit(SET_EMPTY_PAGE, true);
       }
     },
-    async getNavigationConfig({ commit }, condition) {
-      const [res] = await navigatorApi.getDetailById(condition);
-      commit(SET_PAGE_NAVIGATOR_DATA, res);
-    },
-    async setNavIndex({commit}, data) {
-      commit(SET_PAGE_NAVIGATOR_INDEX, data);
-    }
   };
 
   mutations: MutationTree<EditorState> = {
@@ -68,12 +60,6 @@ export default class EditorModule implements Module<EditorState, RootState> {
       const element = elements.find(ele => ele.id === id);
       if (element && data) { element.point = data; }
     },
-    [SET_PAGE_NAVIGATOR_DATA](state, data) {
-      state.navigatorConfig = data;
-    },
-    [SET_PAGE_NAVIGATOR_INDEX](state, data) {
-      state.navIndex = data;
-    },
   };
 
   constructor(initState: EditorState = JSON.parse(JSON.stringify(defaultState))) {

app/web/page/store/modules/activity/type.ts

@@ -16,5 +16,3 @@ export const SET_PAGE_ELEMENTS = 'SET_PAGE_ELEMENTS';
 export const SET_ELEMENT_POINT = 'SET_ELEMENT_POINT';
 export const SET_EMPTY_PAGE = 'SET_EMPTY_PAGE';
 export const UPDATE_APP_LOGIN_STATE = 'UPDATE_APP_LOGIN_STATE';
-export const SET_PAGE_NAVIGATOR_DATA = 'SET_PAGE_NAVIGATOR_DATA';
-export const SET_PAGE_NAVIGATOR_INDEX = 'SET_PAGE_NAVIGATOR_INDEX';