So stellen Sie Funktionsmodule im Vue-Projekt bereit

Als Frontend-Entwickler ist es bei der Entwicklung eines Vue-Projekts eine Grundvoraussetzung, Seiten mit Funktionsmodulen bereitzustellen. Funktionsmodule beziehen sich auf wiederverwendbare Codeblöcke, die sich auf die Seite beziehen. In diesem Artikel werden die Methoden ausführlich vorgestellt.

1. Vue-Plug-Ins verwenden

Vue-Plug-Ins sind unabhängige Funktionsmodule, die direkt in Vue-Projekten verwendet werden können. Die Vue-Community hat eine große Anzahl hervorragender Plug-Ins entwickelt, wie z. B. Vue-Router, Vuex usw. Bevor wir diese Plug-Ins verwenden, müssen wir sie über Vue.use () vorstellen und registrieren.

Sie können die folgenden Methoden verwenden, um Plug-Ins in ein Vue-Projekt einzuführen:

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

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

Vue-Router ist beispielsweise ein Routing-Plug-In. Wenn ein Vue-Projekt Vue-Router verwenden muss, muss es installiert werden und zuerst eingeführt und dann als Vue-Plug-in registriert. Wird in Vue verwendet.

2. Globale Komponenten

Komponenten in Vue können als eine der grundlegendsten Funktionen in der Vue-Entwicklung bezeichnet werden. Wir können Code durch Komponenten wiederverwenden und so auch die Aufteilung von Funktionsmodulen realisieren.

Das Registrieren einer globalen Komponente in Vue ist sehr einfach. Verwenden Sie einfach die Methode Vue.component(). Das Folgende ist ein Beispiel:

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

Auf diese Weise haben wir erfolgreich eine globale Komponente namens my-component registriert, die überall in der Anwendung verwendet werden kann:

<my-component></my-component>

Durch die Verwendung von Komponenten zum Kapseln von Funktionsmodulen kann der Code klarer und einfacher zu warten sein . Wenn Sie in Ihrem Projekt häufig verwendete Funktionsmodule verwenden, können Sie erwägen, diese in Komponenten zu kapseln, um den Vue-Mechanismus zur Wiederverwendung von Vue-Komponenten vollständig zu nutzen.

3. Lokale Komponenten

Wenn alle Komponenten als globale Komponenten registriert sind, erhöht sich die Anzahl der Komponenten, was zu einer aufgeblähten globalen Komponentenliste führt. Es gibt eine andere Möglichkeit, Komponenten zum Definieren von Funktionsmodulen in Vue zu verwenden, nämlich lokale Komponenten. Lokale Komponenten sind nur im Rahmen der Komponente verfügbar, in der sie definiert sind.

Hier ist ein Beispiel, das zeigt, wie eine lokale Komponente in einer Komponente definiert wird:

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

Hier definieren wir eine lokale Komponente namens child-component in der übergeordneten Komponente und verwenden sie dann in der Vorlage der übergeordneten Komponente. Auf diese Weise wird die untergeordnete Komponente nur in der übergeordneten Komponente verwendet und wird nicht zu einer globalen Komponente.

Die Verwendung lokaler Komponenten kann auch das Problem doppelter Namen globaler Komponenten verhindern. Wenn verschiedene Komponenten eine globale Komponente mit demselben Namen definieren, kommt es zu einem Namenskonflikt. Mithilfe lokaler Komponenten können Komponenten mit demselben Namen in ihren eigenen Bereichen definiert werden, um dieses Problem zu vermeiden.

4. Komponenten-Routing

Routing ist auch eines der am häufigsten verwendeten Funktionsmodule in Vue-Projekten. Normalerweise abstrahieren wir eine Routing-Regel in eine Komponente, das heißt komponentenbasiertes Routing.

In Vue Router können Sie das Komponentenattribut verwenden, um die der Route entsprechende Komponente anzugeben:

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

Home und About sind hier beide Komponenten, und jede Route entspricht einer Komponente. Der Vorteil des komponentenbasierten Routings besteht darin, dass das Routing und Die Schnittstelle kann durch Kopplung zerlegt werden, wodurch der Effekt einer hohen Kohäsion und einer geringen Kopplung erzielt wird.

5. Zustandsverwaltung

Vues Zustandsverwaltungsbibliothek vuex bietet auch eine Methode zur Aufteilung von Funktionsmodulen. Mit Hilfe von Konzepten wie Aktionen, Mutationen und Gettern in Vuex können Funktionen in verschiedene Zustände eingeteilt werden.

Wir können den Zustand durch Mutationen ändern, den Zustand durch Getter erhalten und asynchrone Operationen durch Aktionen ausführen. Jeder Zustand entspricht einer festen Verarbeitungsfunktion, und diese Verarbeitungsfunktionen werden in einem einzigen Ordner gespeichert, wodurch die Aufteilung der Funktionsmodule realisiert wird.

Angenommen, wir haben eine Seite, die Benutzerinformationen und Produktinformationen in Vuex verarbeiten muss. Sie kann wie folgt definiert werden:

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)
    }
  }
})

In diesem Beispiel teilen wir die Benutzerinformationen und Produktinformationen in zwei Status auf Die Mutationen, Getter und Aktionen zu ihrer Handhabung werden jeweils definiert. Auf diese Weise behalten wir nicht nur die unabhängigen Eigenschaften jedes Funktionsmoduls bei, sondern realisieren auch den Datentransfer zwischen ihnen.

6. Zusammenfassung

Die oben genannten Methoden sind alle häufig verwendete Methoden zur Funktionsmodulsegmentierung in Vue. Front-End-Entwickler können die geeignete Methode auswählen, um eine funktionale Modularisierung basierend auf bestimmten Szenarien zu erreichen. Unabhängig davon, für welche Methode Sie sich entscheiden, müssen Sie eine hohe Kohäsion und eine geringe Kopplung des Codes aufrechterhalten, um die Wartung und Erweiterung des Vue-Projekts zu vereinfachen.

Das obige ist der detaillierte Inhalt vonSo stellen Sie Funktionsmodule im Vue-Projekt bereit. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!