구성 API vue3에서 디스패처 호출

구성 API vue3에서 디스패처 호출

안녕하세요 여러분 제가 전화하는데 어려움을 겪었습니다.dispatchers그리고.getters구성 API in vuex.

아래는 제 가게입니다.

// 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}
}

나는 내 API를 호출하는 getItems() ->를 호출할 수 없다는 것을 알고 있고 설정에서 getters를 모두 호출할 수 있지만 이를 수행하는 방법을 완전히 알지 못합니다.

저는 처음에 API가 항목을 가져오고 항목 상태를 바인딩한 다음 제 템플릿에서 항목을 표시할 수 있기를 원합니다.어떤 도움이든 감사하겠습니다.

같은 문제에 처한 다른 사람들을 위해, 저는 현재 다음과 같은 해결책을 얻었습니다.우리는 없기 때문에.beforeCreated그리고.CreatedComposition API에서는 설정으로 대체됩니다.그래서 저는 제 배차원을 불러왔습니다.onBeforeMounted나의 업데이트되고 작동하는 코드는 다음과 같습니다.

setup() {

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

}

보다 최적화된 솔루션을 알려주시기 바랍니다.

언급URL : https://stackoverflow.com/questions/69616888/calling-dispatchers-in-composition-api-vue3