页面中的 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 操作中我有

   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 请求

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

我还需要补充或修改什么？

Answer 1

对于异步操作，你需要在 dispatch 之前放置 return 当你在 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);
  }
}

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

Nuxtjs async await in a page doesnt work on page refresh

javascript

vuejs2

nuxt.js