Как сделать глобальный метод во Vue3 composition Api?

В Vue.js 3 Composition API для создания глобального метода можно воспользоваться функцией provide из пакета vue.

1. Создайте новый файл, например globalMethods.js, который будет содержать ваш глобальный метод.

// globalMethods.js

import { reactive, provide } from "vue";

export const globalMethods = reactive({
  myGlobalMethod() {
    // Ваша логика метода
  }
});

provide("globalMethods", globalMethods);

2. Теперь вы можете использовать этот глобальный метод в любом компоненте, подключив его с помощью функции inject.

// MyComponent.vue

<template>
  <button @click="globalMethods.myGlobalMethod">Вызвать глобальный метод</button>
</template>

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

export default {
  setup() {
    const globalMethods = inject("globalMethods");
    
    return {
      globalMethods
    };
  }
};
</script>

В приведенном примере мы создали globalMethods.js, который содержит реактивный объект globalMethods с вашим глобальным методом myGlobalMethod. Затем мы используем функцию provide, чтобы сделать этот объект доступным для инъекции в других компонентах.

В компоненте MyComponent.vue мы подключаем этот глобальный метод с помощью функции inject, указывая имя, которое мы использовали в функции provide. Теперь мы можем вызвать этот глобальный метод в нашем компоненте, просто обращаясь к свойству globalMethods и вызывая метод myGlobalMethod.

Такой подход позволяет создавать и использовать глобальные методы во Vue.js 3 Composition API.