change methods vuejs to nuxtjs

Question

I want to transform this method. I have this vue.js code:

computed: {
  ...mapGetters('user/auth', ['Id']),
},
async mounted() {
  await this.doFetchCustomer(this.Id)
},

methods: {
  async doFetchCustomer(Id) {
    const app = { $axios: this.$axios }
    const datas = (await customerApi.getData(app, Id)) || []
    console.log(datas)
  },
},

I want to transform this code to nuxt asyncData but what I have tried below isn't working. How can I transform it properly?

computed: {
  ...mapGetters('user/auth', ['Id'])
},
async asyncData({$axios}) {
  const datas = (await customerApi.getData($axios, this.Id )) || [];
  console.log(datas);
  return {datas}
}

What is the issue so far? You could not use it the same way in mounted() or in the fetch() hook? — kissu
– kissu, Commented Jul 12, 2021 at 22:47
the issue I would like to use the asyncData hook to retrieve the data without going through the mounted or a method as is the case — francky
– francky, Commented Jul 12, 2021 at 22:51
No, what I mean is: where is the bug here? What is wrong on your side? Also, your mapGetters is taking Id, while your getData function is using this.id? Sure this is not an issue here? Do you see datas in your console.log? — kissu
– kissu, Commented Jul 12, 2021 at 22:51
I'm sorry I just fixed the Id when I use the asyncdata hook the function is not called that is my issue — francky
– francky, Commented Jul 12, 2021 at 22:54
Alright, how do you move to the related page? It is not called at all? Can you please show us the component that do have the asyncData by editing your question and the one that is triggering the navigation. — kissu
– kissu, Commented Jul 12, 2021 at 22:56

tony19 · Accepted Answer · 2021-07-12 23:24:58Z

1

The fact that asyncData isn't called in your component suggests that the component is not a page component.

The Nuxt docs state the requirement:

The asyncData hook. This hook can only be placed on page components.

You can switch to the fetch hook instead, which would work for all component types:

export default {
  data() {
    return {
      datas: null
    }
  },
  async fetch() {
    this.datas = (await customerApi.getData(this.$axios, this.Id)) || [];
  },
}

answered Jul 12, 2021 at 23:24

tony19

140k23 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

change methods vuejs to nuxtjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related