[Vue] 如何定義全域性的方法？

Himmelbleu發表於2024-09-13
Vue

app.use 外掛

// myPlugin.js
export default {
  install(app) {
    app.config.globalProperties.$myPlugin = () => {
      console.log('This is a method from a plugin!')
    }
  }
}

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

const app = createApp(App)
app.use(MyPlugin)
app.mount('#app')

<h1>{{ $myPlugin('greetings.hello') }}</h1>

app.config.globalProperties

可以直接在 main.js 寫全域性屬性和函式，但是這種方式不推薦，不利於維護和團隊開發。推薦透過 app.use。

TS 全域性屬性和函式的型別

某些外掛會透過 app.config.globalProperties 為所有元件都安裝全域性可用的屬性。舉例來說，我們可能為了請求資料而安裝了 $http，或者為了國際化而安裝了 $translate。為了使 TypeScript 更好地支援這個行為，Vue 暴露了一個被設計為可以透過 TypeScript 模組擴充套件來擴充套件的 ComponentCustomProperties 介面：

import axios from 'axios' // 如果不是第三方擴充套件，也建議寫一個 export {} 在頂層避免出問題，具體檢視官方文件，下方連結。

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: typeof axios
    $translate: (key: string) => string
  }
}

Vue3 文件 - 擴充套件全域性屬性 和 型別擴充套件的位置

app.provide

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

const app = createApp(App)

app.provide('globalMethod', () => {
  console.log('This is a provided global method!')
})

app.mount('#app')

<template>
  <div>
    <button @click="globalMethod">Call Injected Method</button>
  </div>
</template>

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

const globalMethod = inject('globalMethod')
</script>

相關文章