在组合 API vue3 中调用调度程序答案

【问题标题】：Calling dispatchers in composition API vue3在组合 API vue3 中调用调度程序
【发布时间】：2021-12-05 13:22:17
【问题描述】：

大家好，我正在努力在 vuex 的组合 API 中调用 dispatchers 和 getters。

下面是我的店铺：

// 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 能够在我的模板中显示我的项目。任何帮助将不胜感激

【问题讨论】：

标签： javascript function vuex vuejs3 vue-composition-api

【解决方案1】：

对于其他陷入同样困境的人，我现在得到了以下解决方法：由于我们在 Composition API 中没有 beforeCreated 和 Created，因此它被 setup 取代。所以我打电话给我的调度员onBeforeMounted我的更新和工作代码如下：

setup() {

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

}

让我知道更优化的解决方案

【讨论】：