页面中的 Nuxtjs 异步等待在页面刷新时不起作用 [英] Nuxtjs async await in a page doesnt work on page refresh

问题描述

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

所以在我的页面中我有

 fetch ({ store, params }) {store.dispatch('getJobspecialisms')},//我也试过异步异步异步数据(上下文){等待 context.store.dispatch('getJobspecialisms');},

所以在我的 vuex 操作中我有

 async getJobspecialisms({commit}){await axios.get(process.env.baseUrl+'/job-specialisms').then((res)=>{提交(类型.SET_JOB_SPECIALISIMS，res.data.data)},(错误)=>{console.log("出现错误", err);});},

现在在我获取记录的组件上

<li v-for="(specialisim) in $store.getters.jobspecialisims"><!-在这里做些事情->

刷新浏览器时不会发送http请求

我哪里出错了?我更喜欢异步等待方法.我理解它返回一个承诺，但我不知道如何知道承诺何时解决.该页面应始终等待直到数据完全提取，因此我在我的页面中调用了 fetch 或 asyncdata 方法

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

解决方案

对于异步操作，您需要在 dispatch 之前放置 returnem> 当您在 fetch 或 asyncData 中调用它时:

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

此答案的来源:问题:Vuex 操作，从页面调度

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

async getJobspecialisms({ commit }) {const res = await axios.get(YOUR_URL);如果(！res.error){commit("getJobspecialisms", res.data.data);} 别的 {控制台日志(res.error)；}}

Am trying to fetch data in the fetch method of my page using vuex and nuxt js but whenever a person refreshes the page it fails but works when i navigate through nuxt navigation

So in my page i have

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

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

SO in my vuex action i have

   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);
    });
  },

Now on my component where am fetching the records

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

The http request is nver sent when a person refreshes the browser

Where am i going wrong? I would prefer the async await method. I uderstand that it returns a promise but i have no idea on how to know when the promise has resolved. Thepage should always await untill the data has been completely ffetched hence ive called the fetch or asyncdata method in my page

What else do i need to add or amend?

解决方案

For async actions, you need to put return before dispatch when you call it inside fetch or asyncData:

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

Source for this answer: Problem: Vuex actions, dispatch from page

Anyway, I still don't understand why you used await with then. If I, I will use async await like this:

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

这篇关于页面中的 Nuxtjs 异步等待在页面刷新时不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！