Cara menggunakan Provide and Inject untuk membuat pemalam Vue3

Mengapa pemalam Vue3 berfungsi secara berbeza berbanding sebelum ini

Dalam Vue2, kebanyakan pemalam menyuntik sifat pada ini. Contohnya, penghala Vue boleh diakses melalui ini.$router.

Walau bagaimanapun, kaedah persediaan() tidak lagi mengandungi rujukan yang sama kepada ini. Sebab utama perubahan ini adalah untuk menambah sokongan untuk Typescript.

Jadi bagaimana kita boleh mengakses pemalam kami dalam Vue3. Kami boleh menggunakan menyediakan dan menyuntik untuk membantu kami menyuntik kebergantungan ke dalam program Vue. Provide/inject digunakan untuk suntikan kebergantungan, yang membolehkan kami menyediakan pemalam dalam direktori akar program Vue dan kemudian menyuntiknya ke dalam komponen anak.

Dalam API Komposisi, kedua-dua kaedah ini hanya boleh dipanggil semasa kaedah persediaan().

Apakah yang disediakan dan disuntik

Kami memerlukan beberapa jenis kunci untuk mengenal pasti kebergantungan, dan Simbol Javascript boleh menggabungkan keperluan ini.

Kaedah provide kemudiannya akan mengaitkan Simbol kami dengan nilai, dan kaedah suntikan akan mendapatkan semula nilai ini dengan Simbol yang sama.

Berikut ialah contoh:

import { provide, inject } from 'vue'  const LoggedInSymbol = Symbol()  const ParentComponent = {   setup() {     provide(LoggedInSymbol, true)   } }  const DeepDescendent = {   setup() {     // 第二个可选参数是默认值（如果不存在）     const isLoggedIn = inject(LoggedInSymbol, false)     return {       isLoggedIn     }   } }

Vue3 boleh melaksanakan beberapa teknik yang sangat praktikal melalui mod ini.

Pergantungan boleh disediakan secara global dalam program

Jika kami ingin menyediakan sesuatu dalam skop global, kami boleh menggunakan app.provide apabila mengisytiharkan tika VUE kami. Suntikan kemudian boleh dilakukan dengan cara yang sama.

main.jsimport { createApp } from 'vue' import App from './App.vue'   const app = createApp(App)  const ThemeSymbol = Symbol() app.provide(ThemeSymbol, 'dark')   app.mount('#app')

Boleh menyediakan data responsif menggunakan ref

Ini juga sangat mudah jika kita ingin menghantar data responsif kepada komponen kanak-kanak. Hanya gunakan ref() untuk lulus sifat reaktif kaedah kami.

// 生产者r (父组件) const LoggedInSymbol = Symbol() const loggedIn = ref('true') provide(LoggedInSymbol, loggedIn)  // 消费者 (子组件) const theme = inject(LoggedInSymbol, ref('false'))

Cara menggunakan menyediakan dan menyuntik dalam pemalam

Sebenarnya mereka bentuk pemalam adalah hampir sama dengan contoh mudah yang baru kita lihat.

Tetapi daripada menggunakan satu nilai, kami mahu menggunakan fungsi gabungan. Ini adalah kelebihan besar Vue3 - keupayaan untuk mengatur dan mengekstrak kod berdasarkan fungsi.

Memandangkan kod kami harus ditulis dengan fungsi gubahan tersusun, kami hanya perlu mencipta kaedah menyediakan dan menyuntik ini untuk menulis pemalam.

Pertama, mari kita lihat secara ringkas contoh pemalam yang disediakan dalam dokumentasi API Komposisi Vue3.

Plugin.jsconst StoreSymbol = Symbol()  export function provideStore(store) {   provide(StoreSymbol, store) }  export function useStore() {   const store = inject(StoreSymbol)   if (!store) {     // throw error, no store provided   }   return store }

digunakan seperti ini dalam komponen sebenar:

// 在组件根目录提供 store // const App = {   setup() {     provideStore(store)   } }  const Child = {   setup() {     const store = useStore()     // use the store   } }

Menurut kod di atas, dalam beberapa komponen akar, kami menyediakan pemalam dan lulus fungsi komponen kepada mereka. Kemudian kita perlu menyuntiknya ke dalam komponen kita di mana sahaja kita mahu menggunakannya.

Komponen tidak perlu benar-benar membuat panggilan menyediakan/menyuntik, tetapi hanya kaedah provideStore/useStore yang didedahkan oleh pemalam.

Bolehkah saya masih menggunakan pemalam lama?

Ringkasnya: ya. Kalau nak cakap lebih, terpulang pada fikiran sendiri.

Anda boleh terus menggunakan API Pilihan dan merujuk ini dengan cara yang sama seperti sebelum ini, dan semua pemalam lama berfungsi tidak berubah.

Tetapi berhijrah ke Vue3 dan memanfaatkan semua cirinya terasa seperti berbaloi.

Selagi anda mahu menggunakan API Pilihan Vue2, pemalam anda akan berfungsi dengan baik. Walau bagaimanapun, banyak pemalam atau perpustakaan yang diselenggara dengan baik harus menambah sokongan untuk Vue3.

Atas ialah kandungan terperinci Cara menggunakan Provide and Inject untuk membuat pemalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!