Bagaimana untuk menyediakan modul fungsi dalam projek vue

Sebagai pembangun bahagian hadapan, apabila membangunkan projek Vue, adalah keperluan asas untuk menyediakan halaman yang mengandungi modul berfungsi. Modul fungsi merujuk kepada blok kod boleh guna semula yang berkaitan dengan halaman Vue menyediakan banyak kaedah untuk mencapai perkara ini.

1. Gunakan pemalam Vue

Pemalam Vue ialah modul berfungsi bebas yang boleh digunakan terus dalam projek Vue. Komuniti Vue telah membangunkan sejumlah besar pemalam yang sangat baik, seperti vue-router, vuex, dsb. Sebelum menggunakan pemalam ini, kami perlu memperkenalkannya dan mendaftarkannya melalui Vue.use().

Anda boleh menggunakan kaedah berikut untuk memperkenalkan pemalam dalam projek Vue:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Vuex from 'vuex'

Vue.use(VueRouter)
Vue.use(Vuex)

Sebagai contoh, vue-router ialah pemalam penghalaan Jika projek Vue perlu menggunakan vue -router, ia perlu dipasang dan diperkenalkan dahulu Kemudian daftarkannya sebagai pemalam Vue dan anda boleh menggunakannya dalam Vue.

2. Komponen global

Komponen dalam Vue boleh dikatakan sebagai salah satu fungsi paling asas dalam pembangunan Vue Kita boleh menggunakan semula kod melalui komponen, dengan itu juga merealisasikan pembahagian modul fungsi .

Mendaftar komponen global dalam Vue adalah sangat mudah, hanya gunakan kaedah Vue.component(). Berikut ialah contoh:

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

Dengan cara ini, kami telah berjaya mendaftarkan komponen global bernama my-component, yang boleh digunakan di mana-mana dalam aplikasi:

<my-component></my-component>

Gunakan komponen untuk merangkum fungsi Modul boleh menjadikan kod lebih jelas dan lebih mudah diselenggara. Jika anda menggunakan modul berfungsi yang kerap digunakan dalam projek anda, anda boleh mempertimbangkan untuk merangkumnya ke dalam komponen untuk menggunakan sepenuhnya mekanisme penggunaan semula komponen Vue Vue.

3. Komponen tempatan

Jika semua komponen didaftarkan sebagai komponen global, bilangan komponen akan meningkat, mengakibatkan senarai komponen global mengembung. Terdapat satu lagi cara untuk menggunakan komponen untuk menentukan modul berfungsi dalam Vue, iaitu komponen tempatan. Komponen tempatan hanya tersedia dalam skop komponen di mana ia ditakrifkan.

Berikut ialah contoh yang menunjukkan cara untuk mentakrifkan komponen setempat dalam komponen:

// 父组件
Vue.component('parent-component', {
  components: {
    'child-component': {
      template: '<div>A custom component!</div>'
    }
  },
  template: '<div><child-component></child-component></div>'
})

Di sini, kami mentakrifkan komponen tempatan bernama child-component dalam komponen induk, dan kemudian dalam komponen induk digunakan dalam templat. Dengan cara ini, komponen kanak-kanak hanya akan digunakan dalam komponen induk dan tidak akan menjadi komponen global.

Menggunakan komponen tempatan juga boleh mengelakkan masalah pendua nama komponen global. Jika komponen berbeza menentukan komponen global dengan nama yang sama, konflik penamaan akan berlaku. Menggunakan komponen tempatan, komponen dengan nama yang sama boleh ditakrifkan dalam skop mereka sendiri untuk mengelakkan masalah ini.

4. Penghalaan komponen

Penghalaan juga merupakan salah satu modul berfungsi yang biasa digunakan dalam projek Vue. Kami biasanya mengabstrakkan peraturan penghalaan kepada komponen, iaitu penghalaan komponen.

Dalam Penghala Vue, anda boleh menggunakan atribut komponen untuk menentukan komponen yang sepadan dengan laluan:

const router = new VueRouter({
  routes: [
    {
      path: '/home',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

Home dan About di sini adalah kedua-dua komponen, dan setiap laluan sepadan dengan komponen-. penghalaan berasaskan Kelebihannya ialah penghalaan dan antara muka boleh dipisahkan, dengan itu mencapai kohesi tinggi dan gandingan rendah.

5. Pengurusan Negeri

Dalam vuex perpustakaan pengurusan negeri Vue, ia juga menyediakan kaedah membahagikan modul berfungsi. Dengan bantuan konsep seperti tindakan, mutasi dan getter dalam vuex, fungsi boleh dibahagikan kepada keadaan yang berbeza.

Kita boleh menukar keadaan melalui mutasi, mendapatkan keadaan melalui getter dan melakukan operasi tak segerak melalui tindakan. Setiap keadaan sepadan dengan fungsi pemprosesan tetap, dan fungsi pemprosesan ini disimpan dalam satu folder, merealisasikan pembahagian modul berfungsi.

Sebagai contoh, katakan kami mempunyai halaman yang perlu mengendalikan maklumat pengguna dan maklumat produk Dalam vuex, ia boleh ditakrifkan seperti berikut:

const store = new Vuex.Store({
  state: {
    userInfo: {},
    productList: []
  },
  mutations: {
    updateUserInfo (state, userInfo) {
      state.userInfo = userInfo
    },
    updateProductList (state, productList) {
      state.productList = productList
    }
  },
  getters: {
    getUserInfo (state) {
      return state.userInfo
    },
    getProductList (state) {
      return state.productList
    }
  },
  actions: {
    async fetchUserInfo ({ commit }, userId) {
      const userInfo = await getUserInfo(userId)
      commit('updateUserInfo', userInfo)
    },
    async fetchProductList ({ commit }) {
      const productList = await getProductList()
      commit('updateProductList', productList)
    }
  }
})

Dalam contoh ini, kami menggabungkan maklumat pengguna dan. Maklumat produk dibahagikan kepada dua keadaan, dan mutasi, getter dan tindakan untuk memprosesnya ditakrifkan masing-masing. Dengan cara ini, kami bukan sahaja mengekalkan ciri bebas setiap modul berfungsi, tetapi juga menyedari pemindahan data antara mereka.

6. Ringkasan

Kaedah di atas adalah kaedah pembahagian modul berfungsi yang biasa digunakan dalam Vue Pembangun bahagian hadapan boleh memilih kaedah yang sesuai untuk mencapai pemodulatan berfungsi berdasarkan senario tertentu. Tidak kira kaedah yang anda pilih, anda mesti mengekalkan kohesi yang tinggi dan gandingan kod yang rendah untuk menjadikan projek Vue lebih mudah untuk dikekalkan dan dikembangkan.

Atas ialah kandungan terperinci Bagaimana untuk menyediakan modul fungsi dalam projek vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!