Nuxt3问题：无法在Pinia Store中访问环境变量

问题出在你直接在Pinia Store的顶层调用useRuntimeConfig()——这个组合式API必须在Nuxt实例上下文环境中才能使用，而Store顶层代码执行时，Nuxt实例还没初始化，所以触发了错误。

把useRuntimeConfig()的调用移到Pinia的action内部即可解决，修改后的Store代码如下：

// Pinia Store for Home Page
import { useRuntimeConfig } from '#app'

export const useHomeStore = defineStore('home-store', {
  state: () => ({
    homePageData: {}
  }),

  actions: {
    async getHomePageData() {
      // 在action内部调用，此时已处于Nuxt上下文环境
      const BASE_URL = useRuntimeConfig().public.api_url
      this.homePageData = await $fetch(`${BASE_URL}/products`)
    }
  }
})

也可以用getters封装BaseURL，方便多个action复用：

export const useHomeStore = defineStore('home-store', {
  state: () => ({
    homePageData: {}
  }),
  
  getters: {
    baseUrl() {
      return useRuntimeConfig().public.api_url
    }
  },

  actions: {
    async getHomePageData() {
      this.homePageData = await $fetch(`${this.baseUrl}/products`)
    }
  }
})

关键注意点 #

• 所有Nuxt提供的组合式API（比如useRuntimeConfig、useRouter等）都不能在Pinia Store的顶层代码中调用，必须放在组件的setup函数、Pinia的actions/getters内部，这些地方才处于Nuxt实例的上下文范围内。
• 确认你的.env文件已正确配置BASE_URL，且文件位于项目根目录，Nuxt默认会自动加载根目录的.env文件。

内容的提问来源于stack exchange，提问作者Waleed Tariq