vue.js Nuxt 3-在Pinia商店中无法访问环境变量

6yoyoihd 于 2022-12-19 发布在 Vue.js

关注(0)|答案(1)|浏览(221)

我有一个问题。我实际上试图通过nuxt runtimeConfig从Pinia商店的env访问BASE_URL，它给出错误500 nuxt示例不可用
以下是错误图像

我想指出的一件事是，当我硬编码BASE_URL时，它工作正常，但当我试图从环境变量访问BASE_URL时，它给予了一个错误。
"这是我的准则"
派尼亚商店

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

const BASE_URL = useRuntimeConfig().public.api_url

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

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

NUXT配置

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      api_url: process.env.BASE_URL
    }
  }
})

vue.js

来源：https://stackoverflow.com/questions/74762025/nuxt3-environmental-variable-not-access-in-pinia-store

1条答案

按热度按时间

dfuffjeb1#

好吧，看来我明白问题所在了。
主要问题是您无法从商店外部访问useRuntimeConfig函数。
示例：
home-store.ts

/**
 * BAD - outside store, not working
 */
const BASE_URL = useRuntimeConfig().public.api_url;

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

  actions: {
    async getHomePageData() {
      /**
       * GOOD - inside store
       */
      const BASE_URL = useRuntimeConfig().public.api_url;
      console.log('BASE_URL HERE:', BASE_URL);
      this.homePageData = await $fetch(`${BASE_URL}/products`);
    },
  },
});

赞(0）回复(0）举报 2022-12-19

我来回答

vue.js Nuxt 3-在Pinia商店中无法访问环境变量

1条答案

相关问题

热门标签

最新问答