在 asyncData Nuxt.js 中传递数据

2024-01-14

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


通常这种配置比如在 nuxt 的环境变量中定义的 baseurl。Docs https://nuxtjs.org/api/configuration-env/

  // 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 模块 https://github.com/nuxt-community/axios-module您可以将 baseUrl 设置为配置选项 https://axios.nuxtjs.org/options.html

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 asyncData Nuxt.js 中传递数据 的相关文章

随机推荐

  • 如何修复错误“反编译的 .class 文件字节码版本 52.0 (Java 8)

    当我在模拟器上测试我的应用程序时 它工作正常 但是当我在真正的 android 10 0 版本 手机上运行该应用程序时 log cat 显示我根本无法理解的错误 这是非常令人困惑的 因为它在一部手机 较低版本 上运行良好 但在另一部手机 A
  • 如何在heroku cedar堆栈上使用virtualenv进行pip卸载?

    我尝试使用以下命令卸载 heroku 上的模块 heroku run bin python bin pip 卸载任何东西 Pip 在 app 树中显示该模块 然后声称已卸载该模块 但再次运行相同的命令显示它安装在 app 树中的同一位置 有
  • OpenLayers 通过 Popups 窃取点击事件

    为什么 FramedCloud 弹出窗口会窃取弹出窗口内的点击事件 current popup new OpenLayers Popup FramedCloud featurePopup f geometry getBounds getCe
  • Maven Surefire 测试插件运行测试,即使它们被排除:

    我排除插件中除我的测试套件之外的所有测试
  • 想要使用Excel VBA选择网站上的按钮

    我想使用 Excel 来浏览网页 但该网站不像普通网站 亚马逊 谷歌等 那样使用 ID 该网站是http www scoopmae com http www scoopmae com 我如何选择 预订演示 按钮 我通常会使用 getelem
  • 在引用任何静态成员之前调用静态构造函数

    根据文档 静态构造函数用于初始化任何静态数据 或执行只需执行一次的特定操作 它被自动调用before创建第一个实例或引用任何静态成员 但我在 stackoverflow 帖子中看到了以下来自 C 规范的引用 如果类中存在静态构造函数 第 1
  • Vim 编译时支持 Python 但看不到 sys 版本

    我编译了 Vim 的开发版本 同时支持 Python 2 和 Python 3 的输出vim version has python dyn and python3 dyn在里面 我运行配置文件 G configure enable pyth
  • Powershell:如何阻止脚本中显示错误?

    例如 当我的 PowerShell 脚本尝试为不存在的服务器 在本例中为 bla 创建 SQL Server 对象时 PowerShell 会以红色显示大量 PowerShell 错误 由于我的脚本检查了 在此类调用以及显示和记录错误之后
  • 如何在服务器端处理模式下使用JOIN进行数据库查询

    我正在使用 jQuery DataTables 作为我的视图列表 我使用了服务器端处理模式 该模式非常适用于大型数据集 但我的问题是我只能使用单个数据库表来完成此操作 使用多个表的自定义查询怎么样 JOIN我的代码无需改变太多 所以我有这个
  • 从 Cake 1.3 迁移到 2.0 及更高版本 - 迁移现有版本,还是仅用于新版本?

    我即将完成我的第一个 CakePHP 驱动的网站 刚刚看到他们已经在使用 CakePHP 2 0 还不是稳定版本 我的问题 迁移到 CakePHP 的新版本 当它成为 稳定 版本时 是否非常耗时 我知道他们有迁移指南 但是 我以前从未使用过
  • 当制作电子表格副本时,installedOnEdit 触发器也会被复制

    我有一个installedOnEdit使用触发器是因为我隐藏和取消隐藏根据条件受保护的列 现在 我已经由工作表所有者添加了触发器 我确实复制了此电子表格并与利益相关者共享以获取意见 在制作电子表格时 脚本确实会被复制 但触发器不会 这怎么可
  • Apache NetBeans 12.1 支持 JDK 15 吗?

    Oracle 最近发布了 JDK 15 我想知道最新版本的 NetBeans IDE Apache NetBeans 12 1 是否支持 JDK 15 我知道 NetBeans 并未正式支持 JDK 15 但我想问是否有人知道它非正式地支持
  • 使用PhpStorm IdeaVim,我无法使用shift+箭头键来选择单词

    我正在使用 PhpStorm 7 1 2 和 IdeaVim 插件 在插入模式下 我想使用选择单词Shift ArrowKey 然而 这个 IdeaVim 插件似乎阻止了这样做 我只能使用命令模式突出显示单词v key shift Home
  • 使用 IntentService 进行线程同步

    我正在尝试创建一个通过意图服务发出 HTTP 请求的应用程序 我需要应用程序等待服务完成其运行 即 让请求返回一些数据 然后再继续其操作 因为其操作涉及对我希望从 HTTP 请求接收的数据的操作 我已经尝试了多种方法 Semaphore C
  • iPhone 开发中的 Objective-C 属性

    Objective C 中属性和实例变量有什么区别 我需要用 OOP 术语来理解这一点 属性声明只是一个用于访问实例变量的便利包装器 在实现中使用 synthesize 吗 thanks 代码牛仔 属性和 ivars 是两个完全不同的东西
  • 在 Datagridview 中显示数据库搜索结果

    我在 Windows 窗体应用程序 c 中使用 Visual Studio 2013 和 SQL Server 2012 作为数据库 我想在一个中显示我的查询搜索结果DataGridView public void customerSear
  • 从命令行远程运行 Jmeter

    是否可以在本地计算机上没有 Jmeter 客户端的情况下在远程服务器上运行 Jmeter 我的意思是我可以从命令提示符在远程计算机上运行 jmeter bat 吗 这样它就可以在远程服务器上运行测试并将结果存储在那边的listener jt
  • Swift:使用闭包的枚举?

    我正在创建一个应用程序 可以将无限数量的规则应用于无限数量的节点 我计划使用核心数据作为数据存储 并在节点和规则之间创建简单的一对多关系 在 Objective C 中 我可能会为每个规则创建类并让它们符合协议 NSArray ruleCl
  • 覆盖主题 bootstrap 4 中的默认 $border-radius-lg 变量

    我在我的项目中使用 bootstrap 4 框架 我通过覆盖核心变量来主题化 如果我调整网格变量 它们会起作用 但是如果我尝试更新 border radius lgvar 没有发生任何改变 默认的 border radius lg尺寸仍在使
  • 在 asyncData Nuxt.js 中传递数据

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