在Vue中定义全局方法的实现方式

// 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');

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

const app = createApp(App);

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

app.mount('#app');

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

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

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

// 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;
  }
};

// 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');

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