Penghijrahan Vue2 ke Vue3 - Cara mengemas kini campuran yang ditambahkan dalam komponen Vue2 dalam API persediaan Vue3.

Question

Baru-baru ini kami mula memindahkan aplikasi kami daripada Vue2 ke Vue3, dan campuran telah ditambahkan pada beberapa komponen, saya ingin mengetahui cara menambahkan campuran ini dalam Vue3.

Saya mencuba beberapa penyelesaian tetapi tidak menemui penyelesaian istimewa yang sepadan dengan `eksport lalai { nama: "Modal", komponen: { Pemuat }, campuran: [] }` dalam cangkuk Vue2. Bagaimanakah saya menambah mixin?

Answer 1

Dalam Vue 3, anda masih boleh menggunakan mixin dengan cara yang sama seperti Vue 2 apabila menggunakan API Pilihan.

const mixin = {
  created() { console.log('Mixin'); },
};

export default {
  name: "Modal",
  components: { Loader },
  mixins: [mixin]
};

Tetapi untuk API Komposisi anda perlu menggunakan fungsi boleh gubah dan bukannya campuran:

// Composable declaration function
import { onMounted } from 'vue';

export function useMixin() {
  onMounted(() => console.log('Mixin'));
  return {};
}

// In your component
import { useMixin } from './mixin';
import Loader from './Loader';

export default {
  name: "Modal",
  components: { Loader },
  setup() {
    useMixin();
    return {};
  },
};

Fungsi gabungan memberikan alternatif yang lebih jelas dan fleksibel kepada campuran apabila menggunakan API Komposisi Vue 3.