vue3 keep-alive 如何做路由切换？

Question

如图
红框内是主页面A，下面用KEEP-ALIVE包裹了三个子路由页面缓存
目前：我目前是将上面的选择食堂的数据写到store里面的，然后在三个子路由界面添加watch监听store里面的被选择的食堂数据，数据一变化就重新请求各自页面的数据

问题：那么这样的问题就是，只要被选择的食堂数据一变，所有的子路由都会重新请求，怎么才能只让被激活的路由请求，然后点击其他路由，如果被选择的食堂变过，才重新请求，没变过就不请求

Answer 1

import { ref, onActivated, onDeactivated, watch } from 'vue';
import { BehaviorSubject, Observable } from 'rxjs';

export default {
  setup() {
    const storeData = ref();

    const data$ = new BehaviorSubject(storeData.value);
    const isActive$ = new BehaviorSubject(true);

    // Watching the storeData
    watch(() => storeData.value, (newVal) => {
      data$.next(newVal);
    }, { deep: true });

    onActivated(() => {
      isActive$.next(true);
    });

    onDeactivated(() => {
      isActive$.next(false);
    });

    async function LoadData() {
      console.log("Data has been reloaded");
      // 实际载入数据的操作
    }

    Observable
      .combineLatest(data$, isActive$)
      .filter(([_, isActiveValue]) => isActiveValue)
      .subscribe((_) => {
        LoadData();
      });
  }
}

Answer 2

用了wacth,那store变了就肯要执行；你这里watch的意义在哪，有需要同步展示的页面效果吗，比如右上角有个数字红标要更新？没有就不需要watch,在beforerouterenter里获取store就行了，时时获取store里的内容，比较一下，一样就不执行，不一样就执行。