Comment créer des fonctions personnalisées pour Vue JS telles que le hook créé() ?

Question

Comment dois-je créer un plugin qui ajoute une fonction nommée struct (comme un hook created()) à tous les composants ?

De plus, je souhaite que mon plugin ait accès à la valeur de retour structure

export par défaut {
   structure() {
       // Accès au contexte
   }
}
≪/pré>
Je dois mentionner que j'utilise Inertia JS. 
            

Answer 1

Vous pouvez utiliser Vue Mixins ou Composables.

Les deux peuvent vous fournir des fonctions et des variables partagées. Mais je ne sais pas comment définir de nouveaux hooks dans Vue, comme create() . Je dois moi-même démarrer votre fonction danscreated(). Bien sûr, vous pouvez utiliser des mixins pour remplacer les hooks Vue existants.

Mixin est très pratique, mais n'est plus recommandé

Il n'y a pas de created() dans l'API Composition created() ，所以你必须使用onBeforeMount()或onMounted(), vous devez donc utiliser onBeforeMount() ou onMounted()

Voici un exemple très basique utilisant les deux techniques

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>