title: How can I dispatch async data with Vue 3 store
body: <p>I am pulling data from an api as async and transferring the payload value returned from this api to the state field in the store with store.dispatch.
  But at first this state is empty. When I make a change on the page and render it, the state is filled.</p>
  <p>the function I pulled the api</p>
  <pre><code> const getTransferredOrder = async () =&gt; {
        isLoading.value = true;
        return await TransferredOrderService.getTransferredOrderSummary()
            .then((payload) =&gt; {
              store.dispatch('GetTransferredList',payload)
              return payload;
            })
            .catch(() =&gt; {
              return [];
            }).finally(() =&gt; {
              isLoading.value = false
            });
      }
  </code></pre>
  <p>i call this function first in onmounted</p>
  <pre><code> onMounted(async () =&gt; {
        await getTransferredOrder()
      })
  </code></pre>
  <p>my actions,mutations and state js files</p>
  <p>actions.js</p>
  <pre><code>const actions={
      GetTransferredList({commit},payload){
          commit('GET_TRANSFERRED_ORDER_LIST',payload)
      },
  
  }
  export default actions
  </code></pre>
  <p>mutations.js</p>
  <pre><code>const mutations={
      GET_TRANSFERRED_ORDER_LIST(state,payload){
          state.transferredOrderList = payload;
      },
  
  }
  export default mutations
  </code></pre>
  <p>state.js here</p>
  <pre><code>const state={
      transferredOrderList:[],
  }
  export default state
  
  </code></pre>
  <p>Since the state is empty in the place where I store.dispatch, it is also empty on other pages.
  But when I write a small console.log on the page and compile it, the store.state fills the page. What exactly does that have to do with it?</p>