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

Question

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

Answer 1

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

setup() {

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

}

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

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

Calling dispatchers in composition API vue3

javascript

function

vuex

vuejs3

vue-composition-api