NuxtJs publicRuntimeConfig in typescript plugin

Question

我正在尝试在TypeScript插件中使用public publicRuntimeConfig，但没有成功。使用JS插件我没有问题。但现在我真的被卡住了，我想我没有看对地方。

问题是如何在打字稿插件中访问此配置？

这是我的nuxt.config.js：

export default {
ssr: false,
...

publicRuntimeConfig: {
baseURL: 'http://localhost:3000'
},
}

我的插件 ：

import Vue from 'vue'
import { Configuration, FolderApi, Folder } from '~/build/openapi/index'
import { AbstractApi } from '~/plugins/api/abstractApi'
declare module 'vue/types/vue' {
interface Vue {
$RfolderApi: MyFolderApi
}
}
export class MyFolderApi extends AbstractApi {
private folderApi: FolderApi
constructor() {
super()
// How to access to app.$config ? Of course they are undefined in this example... What to do to import it ?
this.folderApi = new FolderApi(new Configuration({}), app.$config.baseURL) 
}

...
}
Vue.prototype.$RfolderApi = new MyFolderApi()

有什么想法吗？ 提前谢谢。

Answer 1

Nuxt以两种方式提供$config：在每个组件实例上this.$config，context.$config传递给"特殊的nuxt生命周期领域，如asyncData，fetch，plugins，middleware和nuxtServerInit"(文档)。

看起来您需要访问组件外部的$config，因此您需要在请求周期的早期检索它。特别是，由于您正在更改Vue.prototype，这感觉非常适合Nuxt意义上的插件，而Nuxt并不是您在代码中所拥有的。

如果您将插件文件放在plugins目录中并从nuxt.config.js中的plugins数组中引用它(有关更广泛的示例，请参阅上面的链接)，您可以像这样重写它以访问$config：

import Vue from 'vue'
import { Configuration, FolderApi, Folder } from '~/build/openapi/index'
import { AbstractApi } from '~/plugins/api/abstractApi'
declare module 'vue/types/vue' {
interface Vue {
$RfolderApi: MyFolderApi
}
}
export class MyFolderApi extends AbstractApi {
private folderApi: FolderApi
constructor(baseURL: string) {
super()
this.folderApi = new FolderApi(new Configuration({}), baseURL) 
}

// ...
}
export default function({ $config }) {
Vue.prototype.$RfolderApi = new MyFolderApi($config.baseURL)
}

$config对象的类型声明 (NuxtRuntimeConfig) 的值类型化为any，以便代码将按原样工作，但您也可以扩展声明以使您的属性显式，如下所示：

declare module '@nuxt/types/config/runtime'
{
interface NuxtRuntimeConfig
{
baseURL: string;
}
}