怎么在 Vue 中定义全局方法?

在 Vue 项目中定义全局方法可以让你在任意组件中复用逻辑，避免重复代码。不同的 Vue 版本和不同的应用场景下，实现方式略有不同。下面这个表格汇总了主要的实现方式及其特点，可以帮助你快速了解和选择。

方法	适用 Vue 版本	核心思路	优势	适用场景
`Vue.prototype`	Vue 2	将方法挂载到 Vue 构造函数的原型上	简单直接，易于上手	定义简单的工具函数，如日期格式化、字符串处理
`app.config.globalProperties`	Vue 3	将方法挂载到应用实例的全局属性上	Vue 3 的标准方式，类型支持好	在 Vue 3 项目中定义全局工具方法
插件 (Plugin)	Vue 2 & Vue 3	将逻辑封装在插件的 `install`方法中	模块化、可复用、可统一管理多个全局资源	大型项目，需要封装一组相关的全局功能（如方法、指令、组件）
全局混入 (Mixin)	Vue 2 & Vue 3	将方法混入到每个组件的选项中	功能强大，可以混入任何组件选项（如 `data`, `created`)	需要在每个组件中注入复杂逻辑，但需谨慎使用
Vuex (状态管理)	Vue 2 & Vue 3	在 Store 的 `actions`中定义可复用的函数	集中管理状态和与状态相关的复杂业务逻辑	多个组件需要共享状态或触发复杂的异步操作

💡 各方法详解与代码示例

1. Vue.prototype (Vue 2) / app.config.globalProperties (Vue 3)

这是最直接的方式，适合定义纯函数式的工具方法。

Vue 2 示例：

javascript 复制代码

// main.js
import Vue from 'vue';
import App from './App.vue';

// 定义一个全局工具方法，通常以 $ 开头以示区分
Vue.prototype.$formatDate = (timestamp, format = 'YYYY-MM-DD') => {
  // 实现日期格式化逻辑
  // ... 
  return formattedDate;
};

new Vue({
  render: h => h(App),
}).$mount('#app');

Vue 3 示例：

javascript 复制代码

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

// 定义全局方法
app.config.globalProperties.$formatDate = (timestamp) => { 
  // ... 逻辑同上
};

app.mount('#app');

在组件中使用 (Vue 2 & Vue 3 Options API)：

javascript 复制代码

export default {
  created() {
    // 通过 this 直接调用
    const today = this.$formatDate(Date.now());
    console.log(today);
  }
};

Vue 3 <script setup>中调用 ：在组合式 API 的 <script setup>中，需要通过 getCurrentInstance获取组件实例代理。

xml 复制代码

<script setup>
import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();
const formatToday = () => {
  const today = proxy.$formatDate(Date.now());
  console.log(today);
};
</script>

2. 插件 (Plugin)

当需要定义多个全局方法、指令或组件时，插件是更优雅和模块化的选择。

创建插件：

php 复制代码

// plugins/global-helper.js
export default {
  install(app) { // Vue 3 接收 app 实例；Vue 2 接收 Vue 构造函数
    // 定义全局方法
    const helper = {
      $formatDate(timestamp) { /* ... */ },
      $showLoading() { /* 显示加载提示 */ },
      $hideLoading() { /* 隐藏加载提示 */ }
    };

    // 将辅助方法挂载到全局属性
    app.config.globalProperties.$helper = helper; // Vue 3
    // 或者在 Vue 2 中：Vue.prototype.$helper = helper;
  }
};

注册插件：

javascript 复制代码

// main.js (Vue 3)
import { createApp } from 'vue';
import App from './App.vue';
import globalHelper from './plugins/global-helper';

const app = createApp(App);
app.use(globalHelper); // 使用插件
app.mount('#app');

在组件中使用：

javascript 复制代码

export default {
  methods: {
    async fetchData() {
      this.$helper.$showLoading();
      try {
        // 发起网络请求...
      } finally {
        this.$helper.$hideLoading();
      }
    }
  }
};

3. 全局混入 (Global Mixin) 与 Vuex

全局混入 ：会将选项中指定的内容（如 methods）混入到每一个组件实例中。虽然强大，但过度使用可能导致代码行为难以理解和维护，应非常谨慎地用于确实需要全局注入的逻辑。
Vuex ：主要用于全局状态管理 。其 actions中的方法也可以被看作是一种"全局方法"，但它们主要用于处理与状态变更相关的异步或复杂业务逻辑。如果你的"全局方法"主要目的是修改或获取集中的状态，那么 Vuex 是更合适的选择。

🎯 如何选择与最佳实践

根据场景选择：
- 简单的工具函数（如格式化、校验）：使用 globalProperties/prototype。
- 一组相关的、复杂的功能（如全套UI工具函数）：使用插件进行封装。
- 需要在每个组件创建时都执行的逻辑（慎用）：考虑全局混入。
- 方法与全局状态强相关：使用 Vuex 或 Pinia。
命名规范 ：为了避免与组件自身的选项或未来的 Vue 内置 API 冲突，建议为全局方法名添加统一的前缀，例如 $（如 $api, $helper）。
模块化管理：随着项目变大，将不同类型的全局方法分类到不同的插件或模块中，有利于代码维护。

希望这些详细的解释和示例能帮助你在 Vue 项目中优雅地定义和使用全局方法！如果你对特定场景下的实现有更多疑问，我们可以继续探讨。