javascript - 页面中的 Nuxtjs 异步等待在页面刷新时不起作用

Question

我正在尝试使用 vuex 和 nuxt js 在我的页面的 fetch 方法中获取数据，但是每当有人刷新页面时它就会失败，但是当我通过 nuxt 导航导航时它会工作

所以在我的页面中有

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

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

所以在我的 vuex Action 中我有

   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 请求不会被发送

我哪里错了？ 我更喜欢异步等待方法。我知道它会返回一个 promise ，但我不知道如何知道 promise 何时解决。页面应该一直等待直到数据被完全提取，因此我在页面中调用了 fetch 或 asyncdata 方法

我还需要添加或修改什么？

Answer 1

对于异步操作，在 中调用它时，需要将 return 放在 dispatch 之前fetch 或 asyncData:

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

此答案的来源:Problem: Vuex actions, dispatch from page

无论如何，我还是不明白你为什么要用 await 和 then。如果是，我将像这样使用async await:

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