Nuxt - 비동기 액션 후 대기(이것).$store.displays)

Nuxt - 비동기 액션 후 대기(이것).$store.displays)

저는 Nuxt에 처음 와서 이해가 안 되는 문제에 직면해 있습니다.

코드화하면 다음과 같습니다.

const resp1 = await this.$axios.$post('urlCall1', {...dataCall1});
this.$axios.$post('urlCall2', {...dataCall2, resp1.id});

두 번째 Axios call = > 에서는 resp1.id 가 올바르게 설정되어 있습니다.두 번째 콜을 실행하기 전에 첫 번째 콜이 완료될 때까지 기다립니다.

그러나 vuex 저장소 ex에서 비동기 작업을 정의하는 경우:

  async action1({ commit, dispatch }, data) {
    try {
      const respData1 = await this.$axios.$post('urlCall1', { ...data });
      commit('MY_MUTATION1', respData1);
      return respData1;
    } catch (e) {
      dispatch('reset');
    }
  },
  async action2({ commit, dispatch }, data, id) {
    try {
      const respData2 = await this.$axios.$post('urlCall2', { ...data });
      commit('MY_MUTATION2', respData2);
    } catch (e) {
      dispatch('reset');
    }
  }

그리고 vue 컴포넌트에서 다음과 같은 동작을 수행합니다.

const resp1 = await this.$store.dispatch('store1/action1', data1);
this.$store.dispatch('store2/action2', data2, resp1.id);

action2에는 resp1.id이 정의되어 있지 않습니다.

또, 약속을 「구식」으로 관리하려고 했습니다.

this.$store.dispatch('store1/action1', data1).then(resp1 => this.$store.dispatch('store2/action2', data2, resp1.id))

결과는 여전히 => id = action에서 정의되지 않음2

제 어디가 틀렸는지 말씀해 주시겠어요?

잘 부탁드립니다.

마지막 메모: 두 작업이 서로 다른 스토어에 있습니다.

Vuex는 여러 인수를 허용하지 않으므로 개체로 전달해야 다음과 같이 보일 수 있습니다.

this.$store.dispatch('store2/action2', { ...data2, id: resp1.id });

그리고 상점에서:

async action2({ commit, dispatch }, { id, ...data }) {
    try {
      const respData2 = await this.$axios.$post('urlCall2', { ...data });
      commit('MY_MUTATION2', respData2);
    } catch (e) {
      dispatch('reset');
    }
}

언급URL : https://stackoverflow.com/questions/63818416/nuxt-wait-after-async-action-this-store-dispatch