使用 TypeScript 向 Vue 3 添加全局属性 [英] Add global properties to Vue 3 using TypeScript

问题描述

我想向 Vue 3 应用程序添加一个全局属性，如建议的 这里

I want to add a global property to a Vue 3 application like suggested here

原型方法不适用于 TypeScript.

The prototype approach does not work with TypeScript.

我找到了一个示例，我将其转换为 config.d.ts 代码

I found an example that I converted into this code as config.d.ts

import Vue from 'vue'

import base from '@/config/config.json'
import dev from '@/config/config.dev.json'
import prod from '@/config/config.prod.json'

let config
if (process.env.NODE_ENV === 'production') {
  config = Object.freeze(Object.assign(base, prod))
} else {
  config = Object.freeze(Object.assign(base, dev))
}

declare module 'vue/types/vue' {
  interface Vue {
    $config: config
  }
}

我想加载一些具有 dev 或 prod 范围的本地配置文件.范围内的文件不会被检入 GIT 存储库.

I want to load some local configuration files with dev or prod scope. The scoped files will not be checked into GIT repository.

main.ts 现在看起来像这样...

The main.ts now looks like this...

import Vue from 'vue'
import {createApp} from 'vue'
import App from './App.vue'
import Config from '@/plugins/config.d.ts'

Vue.use(Config)
createApp(App).mount('#app')

问题:

ERROR in src/main.ts:6:5
TS2339: Property 'use' does not exist on type 'typeof import("d:/Martin/Entwicklung/2020/STA-Electron/node_modules/vue/dist/vue")'.
    4 | import Config from '@/plugins/config.d.ts'
    5 |
  > 6 | Vue.use(Config)
      |     ^^^
    7 | createApp(App).mount('#app')
    8 |

我理想中想要实现的是一个全局的 config 或 $config 属性，可以在 Vue 3 的设置方法中使用

What I ideally want to achieve is a global config or $config property that can be used in the setup method of Vue 3

export default defineComponent({
  name: 'App',
  components: {},
  setup(props, context) {
    const elem = ref(context.$config.prop1)
    const doSth = () => {
      console.log('Config', context.$config)
    }
    return {doSth, elem}
  },
})

我该如何解决这个问题?

How can I fix this?

在 danielv 的回答之后，新插件看起来像这样

After the answer from danielv so new plugin looks this

import {App} from 'vue'

export interface ConfigOptions {
  base: any
  dev: any
  prod: any
}

export default {
  install: (app: App, options: ConfigOptions) => {
    app.config.globalProperties.$config =
      process.env.NODE_ENV === 'production'
        ? Object.freeze(Object.assign({}, options.base, options.prod))
        : Object.freeze(Object.assign({}, options.base, options.dev))
  },
}

main.ts 也变成了这个

The main.ts changed also into this

import {createApp} from 'vue'
import App from '@/App.vue'
import ConfigPlugin from '@/plugins/config'
import base from '@/config/config.json'
import dev from '@/config/config.dev.json'
import prod from '@/config/config.prod.json'

createApp(App).use(ConfigPlugin, {base, dev, prod}).mount('#app')

这个简单的插件可以在模板中使用

This simple plugin can be used in the template

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <p>{{ $config.prop1 }}</p>
</template>

IntelliJ 抱怨未知变量 prop1，但它有效.

IntelliJ complains about unknown variable prop1, but it works.

我搜索了很多，但发现没有办法将我的 $config 插入到与组合 API 一起使用的设置方法中.

I searched a lot but found no way to insert my $config into the setup method that is used with the composition api.

推荐答案

您可以在您的应用程序中扩充 @vue/runtime-core TypeScript 模块:

You can augment the @vue/runtime-core TypeScript module in your application:

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $config: Record<string, unknown>;
  }
}

类似于 以前的工作方式 在 Vue 2 中.

similar to how this used to work in Vue 2.

这似乎还没有进入 Vue 3 文档，而是通过 vuejs/引入的vue-next#982.查看 ComponentCustomProperties 接口源代码 了解更多信息.

It seems this has not made it into Vue 3 documentation yet but was introduced with vuejs/vue-next#982. Checkout the ComponentCustomProperties interface source code for more information.

这篇关于使用 TypeScript 向 Vue 3 添加全局属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！