Vue Element Front-End-Anwendungsentwicklung: Verwendung der API Store View in Vuex

Überblick

Wenn wir Vue-Anwendungen entwickeln, müssen wir oft den Inhalt einiger Variablen aufzeichnen. Diese können verwendet werden, um den Status der Schnittstelle zu übertragen oder den Datenaustausch zwischen Seiten zu verarbeiten. Die Verarbeitung dieser Inhalte kann als Vuex-Statussteuerung klassifiziert werden. Beispielsweise müssen wir häufig auf Backend-Daten im Front-End zugreifen. Normalerweise rufen wir dazu die gekapselte Web-API auf, um die Daten abzurufen, und verwenden den Store-Modus, um zugehörige Daten oder Statusänderungen zu verarbeiten, während die Ansicht View hauptsächlich für die Verarbeitung der Schnittstellenanzeige verantwortlich ist. In diesem Aufsatz wird hauptsächlich erläutert, wie die Beziehung zwischen diesen drei integriert werden kann, um logische Operationen wie Datenerfassung, -verarbeitung und -anzeige zu realisieren.

Vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen. Einzelheiten zu den Unterschieden und Verbindungen zwischen den zugehörigen Status-, Getter-, Mutations-, Aktions- und Modulfunktionen von Vuex finden Sie unter: https://vuex.vuejs.org/zh/

1. Trennung von Front-End und Back-End sowie Web-API-Prioritätsroutendesign

Web API ist ein Anwendungsschnittstellen-Framework, das HTTP-Dienste erstellen kann, um eine größere Anzahl von Clients zu unterstützen (einschließlich Browsern, Mobilgeräten wie Mobiltelefonen und Tablets). ASP.NET Web API ist eine ideale Plattform zum Erstellen von RESTful-Anwendungen auf .NET Framework/.net Core. In den aktuell entwickelten Anwendungsszenarien müssen wir häufig auf Winform-Clients, APP-Programme, Website-Programme und die derzeit beliebten WeChat-Anwendungen usw. zugreifen. Diese Daten sollten vom selben Dienst bereitgestellt werden, nämlich der Web-API-Plattform, die wir erstellen müssen. Da die Web-API-Schicht eine öffentliche Schnittstellenschicht ist, können wir die Datenkonsistenz jeder Schnittstellenanwendungsschicht sicherstellen.

Da wir es vorziehen, Front-End und Back-End vollständig zu trennen, kann unser Back-End vollständig von Web API erstellt und unterstützt werden. Wir können eine einheitliche Schnittstellenplattform verwenden, die mit .net Framework oder .net Core erstellt wurde, eine einfache Web-API-Schnittstellenplattform aus Asp.net oder eine Web-API-Plattform, die auf der Grundlage von ABP-aspnetboilerplate erstellt wurde (Einführung in das ABP Framework Essay).

Auf diese Weise können wir basierend auf diesen API-Schnittstellen mehrere Front-End-Anwendungen erstellen, z. B. Web-Front-End, Winform-Front-End und verschiedene APP-Anwendungen.

Mit der Einführung der VUE + Element-Entwicklungsmethode, die Front-End und Back-End trennt, sind die Grenzen zwischen Front-End und Back-End sehr klar. Das Front-End kann die Front-End-Anwendung erstellen, indem es das entsprechende JSON über das Netzwerk erhält.

Bei der Front-End-Verarbeitung besteht das Wichtigste darin, das Store-Objekt im Vuex-Modus zu verwenden, um die Anforderungsverarbeitung für Aktion und Mutation zu implementieren. Nach dem Abrufen der Daten werden die Daten im Statusstatus aktualisiert. Wenn Sie nur Daten für die aktuelle Seite verarbeiten, müssen Sie die Statusinformationen nicht einmal speichern. Sie können die zurückgegebenen Daten direkt abrufen und direkt in der Schnittstellenansicht aktualisieren.

In den frühen Entwicklungsphasen müssen wir nicht einmal eine Beziehung zum Backend haben. Wir können Mock-Daten verwenden, anstatt Daten von der Web-API anzufordern. Solange die Mock-Datenstruktur mit dem von der Web-API-Schnittstelle zurückgegebenen JSON übereinstimmt, können wir im späteren Stadium ein schnelles Andocken erreichen, ohne die vorhandene Codeverarbeitungsmethode zu beeinträchtigen.

2. Verarbeitung von Axios-Netzwerkanforderungen

Bevor wir fortfahren, müssen wir einige Objektkonzepte in Vuex und die Beziehung zwischen ihnen kennen.

Vuex ist ein speziell für Vue.js-Anwendungen entwickeltes Zustandsverwaltungsmuster. Es verwaltet den Status aller Komponenten einer Anwendung über einen zentralen Speicher und sorgt durch entsprechende Regeln für vorhersehbare Statusänderungen. Einzelheiten zu den Unterschieden und Verbindungen zwischen den zugehörigen Status-, Getter-, Mutations-, Aktions- und Modulfunktionen von Vuex finden Sie unter: https://vuex.vuejs.org/zh/

Bevor wir mit Netzwerkanfragen beginnen, müssen wir Axios verstehen. Axios ist ein Promise-basierter HTTP-Client für Browser und Node.js. Es handelt sich im Wesentlichen um einen Wrapper von nativem XHR, aber um eine Implementierungsversion von Promise, die den neuesten ES-Spezifikationen entspricht. Hier müssen wir nur wissen, dass es sich um eine sehr leistungsstarke Bibliothek zur Verarbeitung von Netzwerkanforderungen handelt und diese weit verbreitet ist. Lassen Sie uns zum Verständnis einige Codebeispiele auflisten.

POST-Anforderung

axios({
    Methode: 'post',
    URL: '/Benutzer/12345',
    Daten: {
        Vorname: 'Fred',
        Nachname: 'Flintstone'
    }
})
.then(Funktion (Antwort) {
    console.log(Antwort);
})
.catch(Funktion (Fehler) {
    konsole.log(Fehler);
});

GET-Anfrage

Achsen
  .get('http://rap2api.taobao.org/app/mock/23080/resources/search',{
      Parameter: {
         ID: 5
      }
   })
  .then(res => {
    console.log('Die Daten sind:', res);
  })
  .catch((e) => {
    console.log('Daten konnten nicht abgerufen werden');
  });

Wenn wir Daten über Domänen hinweg anfordern möchten, müssen wir den Proxy in der Konfigurationsdatei festlegen. Für das vue-cli3-Projekt müssen wir die Konfiguration in vue.config.js schreiben.

Sie können das Abfangen von Anforderungen und Antworten separat einrichten und Entscheidungen und Prozesse treffen, bevor die Anforderung gesendet wird und die Antwort eintrifft. Die allgemeine Verarbeitungsmethode besteht darin, eine Klasse wie die Anforderungsklasse zu kapseln und dann eine einheitliche Verarbeitung auf dem Interceptor durchzuführen, z. B. das Hinzufügen einiger Benutzeridentitätsinformationen vor der Anforderung.

// eine Axios-Instanz erstellen
const service = axios.create({
  Timeout: 5000 // Anforderungs-Timeout
})

// Anfrage Anfrage Abfangen service.interceptors.request.use(
  Konfiguration => {

    wenn (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    Konfiguration zurückgeben
  },
  Fehler => {
    // etwas tun mit dem Anfragefehler
    console.log(error) // zum Debuggen
    returniere Promise.reject(Fehler)
  }
)

3. Verwendung von API, Store und View in Vuex

Kehren wir zur Einführung von API, Store und View in Vuex zurück.

Werfen wir einen Blick auf die Kapselung der API-Anforderungsaufrufklasse. Wie unten gezeigt haben wir einige API-Klassendateien für Betriebsdaten erstellt. Jeder API-Name entspricht der zentralisierten Verarbeitung eines Unternehmens, einschließlich Listenanforderungen, Einzelanforderungen, Hinzufügungen, Löschungen, Änderungen usw. für ein bestimmtes Unternehmen, die alle in einer API-Klasse gekapselt werden können.

Werfen wir einen Blick auf die Klassendateidefinition von Product.js, wie unten gezeigt.

Hier verwende ich den Operationsvergleich von Request und Axios. Die beiden sind sich sehr ähnlich, da Request eine einfache Kapselung von Axios ist, die hauptsächlich einige Anmeldeinformationen und einige Antwortfehlerbehandlungen abfängt und einfügt.

Importieren Sie die Anforderung von „@/utils/request“.
Axios von „Axios“ importieren

In der URL hier wird durch die Verarbeitung der Proxy-Konfiguration das entsprechende iqidi durch die Verarbeitung des entsprechenden externen Domänennamens ersetzt, wodurch die Erfassung domänenübergreifender Verarbeitungsanforderungsdaten realisiert wird. Wir müssen hier nur wissen, dass die URL schließlich in etwas wie Folgendes umgewandelt wird

http://www.iqidi.com/h5/GetProductList Sie können die tatsächliche Adresse verwenden, um eine Anfrage zu stellen, und der Rückgabewert ist ein JSON-Datensatz.

Aufgrund des JS-Verarbeitungsteils in der Vue-Ansicht kann die API direkt eingeführt werden, um Daten anzufordern, wie unten gezeigt.

importiere { GetProductList } von '@/api/product'

Dann können wir eine Methode definieren, um API-Daten in der Methode abzurufen.

Methoden: {
getlist(Typ) {
   GetProductList({ Typ: Typ }).then(Antwort => {
     const { Daten } = Antwort
     diese.produktliste = daten.liste
     this.listLoading = falsch
   })
}

Dieser Aufruf ist der direkteste API-Aufruf und führt nicht die im Store-Modul gekapselte Aktion oder Mutation für die asynchrone oder synchrone Verarbeitung ein. Im Allgemeinen ist es einfacher, diese Methode direkt zu verwenden, da für die meisten Seiten- oder Komponentenverarbeitungen keine globale Statusspeicherung von Daten erforderlich ist, d. h. das globale Store-Objekt muss nicht verarbeitet werden.

Wenn wir die entsprechenden Informationen global speichern müssen, müssen wir die Kapselung von API-Aufrufen im Store-Modul einführen, einschließlich der Verarbeitung von Aktionen oder Mutationen.

Definieren wir zunächst die Store-Speicherklasse, wie in der folgenden Schnittstelle gezeigt.

Wenn wir Daten wie Produktlisten in einem globalen Status speichern müssen, können wir die Erstellung eines Moduls im entsprechenden Store-Verzeichnis, beispielsweise product.js, in Erwägung ziehen, um Informationen wie Aktion, Mutation und Status zu verwalten.

importiere { GetProductList, GetProductDetail } von '@/api/product'

konstanter Zustand = {
  Produktliste: [],
  Produktdetails: null
}
const Mutationen = {
  SET_PRODUCT_LIST: (Status, Liste) => {
    Status.Produktliste = Liste
  },
  SET_PRODUCT_DETAIL: (Status, Details) => {
    Zustand.Produktdetail = Detail
  }
}

const Aktionen = {
  // Produktliste getProductList({ commit }, { type }) {
    konsole.log(Typ);
    returniere neues Promise((lösen, ablehnen) => {
      GetProductList({ Typ: Typ }).then(Antwort => {
        const { Daten } = Antwort
        commit('SET_PRODUCT_LIST', Daten)
        auflösen (Daten)
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  },

  // Produktdetails abrufen getProductDetail({ commit }, { id }) {
    returniere neues Promise((lösen, ablehnen) => {
      GetProductDetail({ id: id }).dann(Antwort => {
        const { Daten } = Antwort
        commit('SET_PRODUCT_DETAIL', Daten)
        auflösen (Daten)
      }).fangen(Fehler => {
        ablehnen(Fehler)
      })
    })
  }
}

Standard exportieren {
  Namespace: wahr,
  Zustand,
  Mutationen,
  Aktionen
}

Schauen wir uns das einmal genauer an. Wenn die Business-Klasse des Store-Moduls eingeführt wird, wird der aufrufende Code in der Schnittstellenansicht geändert, um die entsprechende Aktion oder Mutation aufzurufen.

 Methoden: {
    getlist(Typ) {
      // GetProductList({ Typ: Typ }).then(Antwort => {
      // const { data } = Antwort
      // diese.Produktliste = Datenliste
      // diese.listLoading = false
      // })

      this.$store.dispatch('product/getProductList', { Typ: Typ }).then(data => {
        diese.produktliste = daten.liste
        // dies.laden = false
      }).catch((e) => {
        // dies.laden = false
      })
    }

Wir möchten hier betonen, dass Sie im Allgemeinen den API-Klassenaufruf im Ansichtsmodul verwenden können. Es ist nicht erforderlich, für jedes Geschäftsmodul eine Store-Modulklasse für die entsprechende Verwaltung zu erstellen. Nur wenn diese Statusdaten zwischen mehreren Seiten oder Komponenten geteilt werden müssen, sollten Sie die Einführung der Store-Modulklasse für eine detaillierte Verwaltung in Betracht ziehen.

Wir haben gerade gesagt, dass Sie, wenn Sie ein Store-Statusverwaltungsmodul für das entsprechende Geschäftsmodul erstellen müssen, eine entsprechende Modulklasse erstellen müssen, beispielsweise die zuvor erwähnte Klassendatei product.js.

Die Vuex Store-Verwaltungsklasse im Verzeichnis Modules wird entsprechend der Geschäftsgrenzen aufgeteilt. Für jedes entsprechende Geschäft wird eine separate Datei zur Verwaltung erstellt (falls erforderlich).

In index.js laden wir diese Klassen entsprechend unterschiedlicher Namespaces durch dynamisches Modulladen und verwenden sie einheitlich.

Vue von „vue“ importieren
Vuex von „vuex“ importieren
Getter aus „./getters“ importieren

Vue.Verwenden(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const moduleFiles = require.context('./modules', true, /\.js$/)

// Sie müssen die App nicht aus „./modules/app“ importieren.
// es werden automatisch alle Vuex-Module aus der Moduldatei angefordert
const module = moduleFiles.keys().reduce((modules, modulePath) => {
  // setze './app.js' => 'App'
  const Modulname = Modulpfad.replace(/^\.\/(.*)\.\w+$/, '$1')
  Konstantwert = ModuleDateien(Modulpfad)
  Module[Modulname] = Wert.Standard
  Rückführmodule
}, {})

const store = neuer Vuex.Store({
  Module,
  Getter
})

Standardspeicher exportieren

Oben finden Sie detaillierte Informationen zur Verwendung von API Store View in Vuex bei der Entwicklung von Vue Element-Frontend-Anwendungen. Weitere Informationen zu Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!