Wie erstelle ich benutzerdefinierte Funktionen für Vue JS, z. B. den Hook „created()'?

Question

Wie soll ich ein Plugin erstellen, das allen Komponenten eine Funktion namens struct hinzufügt (wie ein created()-Hook)?

Außerdem möchte ich, dass mein Plugin Zugriff auf den Rückgabewert Struktur hat.

export default {
   Struktur() {
       // Zugriff auf Kontext
   }
}

Ich muss erwähnen, dass ich Inertia JS verwende.

Answer 1

您可以使用 Vue Mixins 或 可组合项。

两者都可以为您提供一些共享的函数和变量。但我不知道如何在 Vue 中定义新的钩子，比如 create() 。我必须自己在created() 中启动你的函数。当然，您可以使用 Mixins 覆盖现有的 Vue hooks。

Mixin 非常方便，但不再推荐

Composition API 中没有 created() ，所以你必须使用onBeforeMount()或onMounted()

这是一个使用这两种技术的非常基本的示例

const { createApp, ref, onBeforeMount } = Vue;

const myMixin = {
  created() {
    console.log('myMixin: created()')
  }
}

const myComposable = () => {
    onBeforeMount(() => {
       console.log('myComposable: onBeforeMount()')    
    })
    const myFunction = () => console.log('myFunction()')    
    return { myFunction }
}

const App = {
  setup() {
    const { myFunction } = myComposable()
    return  { myFunction }
  },
  mixins: [myMixin]
}

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

<div id="app">
  <button @click="myFunction()">myFunction()</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>