페이지에서 Nuxtjs 비동기 기능이 페이지 새로 고침 시 작동하지 않음

페이지에서 Nuxtjs 비동기 기능이 페이지 새로 고침 시 작동하지 않음

vuex 및 nuxt js를 사용하여 내 페이지의 가져오기 메서드로 데이터를 가져오려고 하지만 사용자가 페이지를 새로 고칠 때마다 실패하지만 nuxt 탐색을 통해 이동하면 작동합니다.

그래서 내 페이지에는

    fetch ({ store, params }) {
        store.dispatch('getJobspecialisims')
    },

   //IVE ALSO TRIED ASYNC
     async asyncData (context) {
        await context.store.dispatch('getJobspecialisims');
    },

그래서 나는 vuex 액션에서

   async getJobspecialisims({commit}){
      await axios.get(process.env.baseUrl+'/job-specialisims').then((res)=>{
        commit(types.SET_JOB_SPECIALISIMS, res.data.data)
      },(err)=>{
           console.log("an error occured ", err);
    });
  },

이제 레코드를 가져오는 내 컴포넌트에서

<div>
  <li v-for="(specialisim) in $store.getters.jobspecialisims">
    <!-DO STUFF HERE->   
 </li>

http 요청은 사용자가 브라우저를 새로 고칠 때 전송됩니다.

내가 어디가 잘못됐지?비동기 대기 방식을 선호합니다.나는 그것이 약속을 돌려주는 것은 이해하지만 그 약속이 언제 해결되었는지 알 수 있는 방법은 모르겠다.이 페이지는 데이터가 완전히 페치될 때까지 항상 대기해야 합니다.따라서 내 페이지에서 fetch 메서드 또는 asyncdata 메서드를 호출했습니다.

그 밖에 무엇을 추가하거나 수정해야 합니까?

비동기 액션의 경우 fetch 또는 asyncData 내에 호출할 때 디스패치 전에 return을 넣어야 합니다.

fetch ({ store, params }) {
  // store.dispatch('getJobspecialisims')
  return store.dispatch('getJobspecialisims')
},

이 답변의 출처: 문제: Vuex 작업, 페이지에서 디스패치

어쨌든, 난 아직도 네가 왜 그때까지 기다렸는지 이해가 안 돼.이 경우 다음과 같이 비동기 wait를 사용합니다.

async getJobspecialisims({ commit }) {
  const res = await axios.get(YOUR_URL);
  if (!res.error) {
    commit("getJobspecialisims", res.data.data);
  } else {
    console.log(res.error);
  }
}

언급URL : https://stackoverflow.com/questions/50663868/nuxtjs-async-await-in-a-page-doesnt-work-on-page-refresh