全局属性的“功能”类型上不存在 Vue3 属性“x”答案

【问题标题】：Vue3 property 'x' does not exist on type 'Function' for global property全局属性的“功能”类型上不存在 Vue3 属性“x”
【发布时间】：2021-12-31 17:50:09
【问题描述】：

我有一个 Quasar 应用，但似乎遇到了一个奇怪的问题。我正在尝试定义一个全局变量，它是一个仅包含有关应用程序的元信息的对象。应用程序完全编译，正确的信息显示在 HTML 中，但在 VSCode 中出现错误。

src/boot/BackChat.js

import { boot } from 'quasar/wrappers';

const version = '0.0.0';

const backChat = {
  version
};


export default boot(({ app, router, store }) => {
  app.config.globalProperties.backChat = backChat;
});

// ...
<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      backChat: this.backChat
    };
  }
}
</script>

我使用这个接口是错误的还是这只是 Vue 文件验证的一个错误？似乎它认为 Login.vue 中的“backChat”是一个函数。如果我将 data() 更改为 mount()，它不再是一个函数，但是我无法在 DOM 中访问它。我对 Vue 很陌生。

【问题讨论】：

可能只是类型推断的问题 - 在 Vue 3（您似乎正在使用）中，您应该使用 defineComponent 定义您的组件

标签： javascript vue.js quasar

【解决方案1】：

我有一个解决方法，这是最简单的方法。我不确定这是否是您的 supposed 这样做的方式，但由于它认为它是一个函数，我只是将 globalProperty 设为一个返回对象的函数。

src/boot/BackChat.js

// ...
export default boot(({ app, router, store }) => {
  app.config.globalProperties.$backChat = () => backChat;
});

// ...
data() {
    return {
      username,
      password,
      backChat: this.$backChat()
    };
},

这修复了 Vue 文件中突出显示的错误，并允许使用相同的全局对象。

【讨论】：