在 asyncData Nuxt.js 中传递数据答案

【问题标题】：Passing Data in asyncData Nuxt.js在 asyncData Nuxt.js 中传递数据
【发布时间】：2018-12-15 21:05:50
【问题描述】：

我是 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，但有没有办法传递数据。谢谢。

【问题讨论】：

从哪里传递数据？
在asyncData中，查看axios.get(this.baseUrl)中的this.baseUrl是无效的。我怎样才能通过它？谢谢。
你不能从数据中传递它。您只能使用上下文中的对象。像参数，或存储。您可以将任何东西放在存储中并从 asyncDAta 访问它
我明白了，我现在知道了……所以我的全局数据需要在存储中传递，并且可以在 context.store 或 es6 { store } 中访问。谢谢..
好吧。对于您使用 process.env 的全局数据

标签： nuxt.js

【解决方案1】：

通常这种配置就像在 nuxt 的 env vars 中定义的 baseurl。 Docs

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

然后您可以通过 process.env 在任何地方访问它，例如在异步数据中

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

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

import axios from 'axios'

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

或者你可以使用@nuxt/axios module，你可以将baseUrl设置为configuration option

【讨论】：

也可以直接访问envasyncData({ env })