在組合 API vue3 中調用調度程序

Question

大家好，我打電話與掙扎dispatchers和getters在vuex組成的API。

下面是我的店鋪：

// state
items: Item[] = [];

// getters
get getItems(): ComputedRef<Item[]> {
    return computed(() => this.items);
}

// mutations
@Mutation
commitSaveItems(items: Item[]) {
    this.items = items;
}

// actions
@Action
async dispatchGetItems(): Promise<boolean> {
    const response: Response = await this.api.getItems();
    const items: Item[] = response.data;
    console.log(items);
    this.commitSaveItems(items);
    return true;
}

組合物為：

export function allItems(): ComputedRef<Item[]> {
    const items = itemStore.getItems;
    return items;
}

export async function getItems(): Promise<boolean> {
    return itemStore.dispatchGetItems();
}

組件為：

setup() {
   getItems();

   let items = allItems();

   return {items}
}

我知道我不能調用 getItems() -> 那是在設置中調用我的 API 和 getter，但我完全不知道如何做到這一點。

我希望最初我的 API 獲取項目並綁定項目狀態，然后我的 getter 能夠在我的模板中顯示我的項目。 任何幫助將不勝感激

Answer 1

對於其他陷入同樣困境的人，我現在得到了以下解決方法：由於我們在 Composition API 中沒有beforeCreated和Created它被beforeCreated替換。 所以我在onBeforeMounted調用我的調度程序，我的更新和工作代碼如下：

setup() {

  let items: ComputedRef<Item[]> = computed(() => []);
  onBeforeMount(async () => {
    await getItems();
    items = allItems();
  });

}

讓我知道更優化的解決方案