Bagaimana untuk mencipta fungsi tersuai untuk Vue JS seperti cangkuk create()?

Question

Bagaimanakah saya harus membuat pemalam yang menambahkan fungsi bernama struct (seperti created() cangkuk) pada semua komponen?

Selain itu, saya mahu pemalam saya mempunyai akses kepada struktur

eksport lalai {
   struktur() {
       // Akses kepada konteks
   }
}

Saya perlu menyebut bahawa saya menggunakan Inertia JS. 

Answer 1

Anda boleh menggunakan Vue Mixins atau Composables.

Kedua-duanya boleh memberi anda beberapa fungsi dan pembolehubah yang dikongsi. Tetapi saya tidak tahu bagaimana untuk menentukan cangkuk baharu dalam Vue seperti create() . Saya perlu memulakan fungsi anda dalam create() sendiri. Sudah tentu, anda boleh menggunakan mixin untuk mengatasi cangkuk Vue sedia ada.

Mixin sangat mudah, tetapi tidak lagi disyorkan

Tiada dicipta() dalam Composition API created() ，所以你必须使用onBeforeMount()或onMounted(), jadi anda mesti menggunakan onBeforeMount() atau onMounted()

Berikut adalah contoh yang sangat asas menggunakan kedua-dua teknik

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>