Nuxt.js: Problems with async data in pages template

[alexmoreno]

I'm at /loja/pages/index.vue
This is my code:

<template>
    <div>
      <template-home></template-home>
      {{produtos}}
    </div>
</template>

<script>
  import TemplateHome from '~/components/default/Templates/Home'
  import {$get} from '~/.nuxt-helpers/axios';
  import axios from 'axios'

  export default {
    components: {
      TemplateHome
    },
    async asyncData({params}) {
        let { produtos } = await axios.get('http://localhost:3010/api/produtos');
        return {produtos}
    }


  }
</script>

OK, I get that I cannot use asyncData into layouts or components, but why it keeps returning me [Vue warn]: Property or method "produtos" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. ?
I'm already using nuxtServerInit to get some initial data to my state, but I think the right way to pass data to components is by props (I might be wrong here).
What I'm doing wrong here?

_{This question is available on Nuxt.js community (#c593)}

[alexmoreno]

With promises it worked.

    asyncData({params}) {
        return  axios.get('http://localhost:3010/api/produtos')
        .then((res) => {
            return {produtos: res.data}
        })
    }

Why? haha

[stephan281094]

It seems like you forgot to about the data property in the async/ await example. Instead you could do something like:

async asyncData ({ params }) {
  const { data } = await axios.get('http://localhost:3010/api/produtos')
  return { produtos: data }
}

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.