Vueの反応性の問題

Question

2つの配列の配列を連結しようとしていますが、そのうちの1つを非同期にフェッチするため、効果がありません。

this.subcategories = [...this.subcategories, ...[ this.$store.getters['categories/subcategoriesOfCurrent'] ]]; 

上記ゲッターは、この割り当てがトリガされたときに、ゲッターは空である、いくつかのMS（サーバ応答）の後に設定されています。状態が設定されたとき（サーバが応答したとき）、配列 'サブカテゴリ'は更新されるべきであるが、そうではない（ゲッターは）。どのようにそれを解決するには？

もっとコード：

ゲッター：

subcategoriesOfCurrent: (state: CategoriesState, getters: any) => { 
     return (getters.current && getters.current.subcategoryIds) ? 
      getters.current.subcategoryIds.map((id: string) => getters.all[id]) : []; 
    } 

アクション：

updateCategorySubcategories: (state: CategoriesState, { parentId, categories }: { parentId: string; categories: Category[] }): void => { 
     Vue.set(state.categories[state.currentCategoryId], 'subcategoryIds', categories.map(category => category.id)); 
    }, 

Answer 1

は、サブカテゴリのために計算を作成します：subcategoryIdsを更新

setCategory: ({ commit, dispatch }: ActionArgs, categoryId: string) => { 
     commit('setCategory', categoryId); //sets current category Id 
     dispatch('fetchSubcategories', categoryId); //fetching from server which commits updateCategorySubcategories 
    }, 



fetchSubcategories: ({ dispatch, commit }: ActionArgs, parentId: string): void => { 
      HttpService.getInstance().get(`/categories?parent_id=${parentId}`).subscribe(
       result => { 
        commit('updateCategories', result.data); 
        commit('updateCategorySubcategories', { parentId, categories: result.data }); 
       } 
      ); 
     }, 

変異

computed: { 
    subcategories() { 
     return [...this.subcategories, ...[ this.$store.getters['categories/subcategoriesOfCurrent'] ]]; 
    } 
} 

計算された小道具が反応性であるので、毎回ゲッターが