Nuxt 3 中的环境变量与 Pinia答案

【问题标题】：Environment variables in Nuxt 3 with PiniaNuxt 3 中的环境变量与 Pinia
【发布时间】：2022-06-12 19:57:51
【问题描述】：

我正在尝试使用 useRuntimeConfig() 在 defineStore() 内的 Pinia 商店中呈现 env 变量，但商店无法使用该方法，抛出错误： “Nuxt 实例不可用”。

我想出了一个解决方法并创建了一个可组合的函数，可以在其中使用 useRuntimeConfig() 并返回我的环境变量。然后在存储状态中调用此可组合对象。

对于过去像使用 process.env 这样微不足道的事情来说，这听起来太复杂了。使用 Nuxt 3 + Pinia 和环境变量的最佳做法是什么？

【问题讨论】：

把它放在一个可组合的环境中听起来完全没问题，而且在可重用性方面也很棒。它不在一个地方，而是目前整个 Vue3 生态系统的主要目标（独立解耦）。 process.env 很长一段时间都不是推荐的解决方案。

标签： environment-variables nuxt.js nuxtjs3 pinia

【解决方案1】：

在 Nuxt 3 中比在 Nuxt 2 中“更难”。

因为 Nuxt 实例 在非 Nuxt 的“原生” 的地方不可用，例如 Pinia 及其商店或您在项目中创建的任何文件夹不是 /server、/components、/composables 等。

目前 Pinia 在 Nuxt 中没有默认提供，因此，您所要求的某些功能“开箱即用”不可用。也许在（接近的）“未来”团队会整合它，但我们不知道。

目前我个人解决问题的方法是按照您所做的，结合useRuntimeConfig()、.env 文件和可组合文件。

请记住，Nuxt 3 是一个候选版本，许多事情在不久的将来可能会发生变化。

许多包要等到 v1.0 发布才能集成，然后记录如何使用框架，pinia 可能就是这种情况。

【讨论】：

分离事物时似乎合乎逻辑。这可能不会很快改变，因为这是 Composable 的用途。

【解决方案2】：

我想我找到了一种更直接的方法。在 Pinia 的 defineStore 中，Nuxt 应用程序是这样暴露的：

this.$nuxt

所以要获取我可以使用的环境变量：

this.$nuxt.$config.public.API_HOST

如果我想从插件中访问它，那么我可以使用：

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:created', async () => {
    console.log('Starting app with API: ', nuxtApp.$config.public.API_HOST)
   })
})

【讨论】：