如何使用 Vue 3 存儲分派異步數據

Question

我正在從 api 作為異步提取數據，並將從此 api 返回的有效負載值傳輸到帶有 store.dispatch 的商店中的 state 字段。 但起初這個 state 是空的。 當我在頁面上進行更改並呈現它時，state 被填充。

function 我拉了 api

 const getTransferredOrder = async () => {
      isLoading.value = true;
      return await TransferredOrderService.getTransferredOrderSummary()
          .then((payload) => {
            store.dispatch('GetTransferredList',payload)
            return payload;
          })
          .catch(() => {
            return [];
          }).finally(() => {
            isLoading.value = false
          });
    }

我首先在 onmounted 中將此稱為 function

 onMounted(async () => {
      await getTransferredOrder()
    })

我的動作、突變和 state js 文件

動作.js

const actions={
    GetTransferredList({commit},payload){
        commit('GET_TRANSFERRED_ORDER_LIST',payload)
    },

}
export default actions

突變.js

const mutations={
    GET_TRANSFERRED_ORDER_LIST(state,payload){
        state.transferredOrderList = payload;
    },

}
export default mutations

state.js 在這里

const state={
    transferredOrderList:[],
}
export default state

由於state在我存放.dispatch的地方是空的，所以在其他頁面上也是空的。 但是當我在頁面上寫一個小的console.log並編譯它時，store.state會填滿頁面。 這與它究竟有什么關系？

Answer 1

您可以查看控制台並在此處寫入錯誤。

你為什么回來？ 你能把代碼改成->

const getTransferredOrder = async () => {
      isLoading.value = true;
      await TransferredOrderService.getTransferredOrderSummary()
          .then((payload) => {
            store.dispatch('GetTransferredList',payload);
          })
          .catch(() => {
            store.dispatch('GetTransferredList',[]);
          }).finally(() => {
            isLoading.value = false
          });
    }