Question

我是nuxt.js的新手，我想问一下是否有任何方法可以在asyncData中传递数据。这是代码。

    <script type="text/javascript">
  import axios from 'axios'
  export default {
    data(){
        return {
          sample: 'asdf',
          baseUrl: 'https://jsonplaceholder.typicode.com/posts/1'
        }
    },
    async asyncData ({ params }) {
      let { data } = await axios.get(this.baseUrl)
      return { title: data}
    }
}
</script>

我知道您无权访问this，但是有一种方法可以传递数据。谢谢。

Answer 1

通常，这种配置类似于在nuxt的env vars中定义的baseurl。 Docs

  // nuxt.config.js
  env: {
    baseUrl: process.env.BASE_URL || 'http://localhost:3000'
  }

然后您可以通过process.env例如在任何地方访问它在asyncData中

async asyncData ({ params }) {
  let { data } = await axios.get(process.env.baseUrl)
  return { title: data}
}

但是对于axios的baseUrl，您只需定义一次即可，例如在插件/ axios中，然后从那里导入

import axios from 'axios'

export default axios.create({
  baseURL: process.env.baseUrl
})

或者您可以使用@nuxt/axios module，在这里您可以将baseUrl设置为configuration option

在asyncData Nuxt.js中传递数据

1 个答案: