在组合接口vue3中调用调度程序
在组合接口vue3中调用调度程序
提问于 2021-10-18 13:21:33
大家好，我在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能够在我的模板中显示我的项。任何帮助我们都将不胜感激。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-10-19 08:03:07
对于其他陷入同样困境的人，我现在得到了以下解决方法:由于我们在Composition中没有beforeCreated和Created，所以它被setup所取代。所以我在onBeforeMounted中调用我的调度程序，我的更新和工作代码如下所示：
setup() {
let items: ComputedRef<Item[]> = computed(() => []);
onBeforeMount(async () => {
await getItems();
items = allItems();
});
}让我知道更优化的解决方案
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69616888
复制相关文章
相似问题
腾讯云开发者
