How to use Vue.prototype or global variable in Vue 3?

在Vue 3中，Vue.prototype 的概念已经有所改变，其对应的是 Vue 2 中的全局属性和方法的配置方式。在 Vue 3 中，全局属性和方法推荐使用全新的 Composition API 方式通过提供和注入机制来实现。

在 Vue 3 中，推荐的方式是使用 provide 和 inject 配合 Composition API 来替代 Vue 2 中的 Vue.prototype。这种方法不仅可以提供更好的类型推断支持，还可以更好地与 Vue 3 的响应式系统集成。下面是一个如何在 Vue 3 中使用全局变量的例子：

步骤 1: 创建一个全局变量

首先，你可以创建一个 JavaScript 文件来存储你的全局变量或函数。例如，创建一个 useGlobalProperties.js 文件：

javascript
import { reactive } from 'vue';

export const globalProperties = reactive({
  appName: 'My Vue App',
  version: '1.0',
  increaseVersion() {
    this.version += 0.1;
  }
});

步骤 2: 提供全局变量

在你的根 Vue 组件 (通常是 App.vue 或者是在 main.js 中) 使用 provide 方法提供这些全局变量：

javascript
import { createApp } from 'vue';
import App from './App.vue';
import { globalProperties } from './useGlobalProperties';

const app = createApp(App);

app.provide('globalProps', globalProperties);

app.mount('#app');

步骤 3: 在组件中注入全局变量

现在你可以在任何子组件中使用 inject 函数来访问这些全局变量：

vue
<template>
  <div>
    <h1>{{ globalProps.appName }}</h1>
    <button @click="globalProps.increaseVersion">Increase Version</button>
    <p>Current Version: {{ globalProps.version }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const globalProps = inject('globalProps');

    return { globalProps };
  }
};
</script>

这样，你就可以在组件中访问并操作这些全局变量了，而且这种方式是响应式的，界面会自动更新。

结论

使用 Vue 3 的 provide 和 inject 功能可以替代 Vue 2 中的 Vue.prototype，使得代码更加模块化和易于维护。这种方式更加符合 Vue 3 的设计理念，也能够更好地利用 Vue 3 的响应式系统。