So verwenden Sie Provide zur Implementierung der Statusverwaltung in Vue3

Vorwort

Im Vue-Ökosystem bietet uns Vuex, die offizielle Bibliothek zur Statusverwaltung, sehr praktische Funktionen für die Vue-Anwendungsentwicklung. Die Größe von Vuex 20K+ bringt jedoch auch einige Kosten mit sich. Für kleinere Projekte lohnt es sich nicht, Vuex nur einzuführen, um eine kleine Menge an Daten wie Benutzerinformationen zu speichern.

Vue2.2.x stellte später die Provide/Inject-API bereit, um uns bei der Kommunikation zwischen komponentenübergreifenden Komponenten zu unterstützen.

Vue3.x stellt außerdem eine Anwendungs-API bereit, die es uns erleichtert, auf dieser Basis eine grundlegende Statusverwaltung zu implementieren.

So implementieren Sie Vuex-Funktionen über Provide/Inject

Denken wir zunächst über die allgemeine Logik nach, machen wir daraus ein Plug-In und registrieren es über die Use-Methode bei der Anwendungsinstanz.

Bei der Installationsmethode werden die Daten über die Methode app.provide auf der Stammkomponente bereitgestellt. Die Daten sollten responsive Daten sein und aus Gründen der Datensicherheit sollten Änderungen an den Daten eingeschränkt werden. Sie folgen dem Design eines unidirektionalen Datenflusses und können nicht direkt von Benutzern geändert werden. Daher sollten die Daten beim Freigeben schreibgeschützt verarbeitet werden.

Implementieren Sie eine useStore-Funktion ähnlich wie Vuex, die es Benutzern ermöglicht, über diese Methode auf Daten zuzugreifen.

Implementieren Sie mapState-, mapMutations- und mapActions-Methoden ähnlich wie Vuex, um Vorgänge zu vereinfachen.

Die Verwendung ist genau die gleiche wie bei Vuex.

Registrieren Sie dieses Plugin in Ihrer Anwendung

//main.ts
importiere { createApp } von 'vue'
App aus „./App.vue“ importieren
Router aus „./router“ importieren

Store aus „./store“ importieren

const app = createApp(App)

app.verwenden(Router).verwenden(Store).mount('#app')

Plugin-Eintragsdatei

Exportieren Sie in der Eingabedatei alle Methoden direkt.

// sky-vuex/index.ts
exportiere * von './main/index'

Erstellen Sie einen Store und mounten Sie die entsprechenden Daten auf der Root-Komponente

Der Store selbst ist ein Objekt, das Statuseigenschaften und Methoden wie Commit und Dispatch enthält. Die Hauptfunktionen des Stores bestehen darin, allen Komponenten den Abruf des Store-Objekts zu ermöglichen, um die Daten im Status abzurufen und zugehörige Methoden aufzurufen, um den Status zu ändern.

// sky-vuex/main/index.ts
importiere {inject, reactive, readonly} von 'vue'

const mainStoreSky = Symbol('Hauptspeicherschlüssel')

Schnittstelle storeOptions {
  Status?: beliebig
  Aktionen?: alle
  Mutationen?: irgendwelche
}

export const createStore = (options: storeOptions = {}) => { // Ein Store-Objekt erstellen const initOptions = {
    Zustand: {},
    Aktionen: {},
    Mutationen: {},
  }

  const mergeOptions: storeOptions = Object.assign(initOptions, Optionen)

  const state = reaktiv(mergeOptions.state)

  const speichern = {
    Status: schreibgeschützt (Status),
    dispatch(Ereignisname: Zeichenfolge, ...Argumente: beliebig[]) {
      mergeOptions.actions[Ereignisname](Speichern, ...Argumente)
    },
    commit(eventName: string, ...args: any[]) {
      ...
    },
  }

  zurückkehren {
    installieren(App: beliebig) {
      app.provide(mainStoreSky, Geschäft)
    },
  }
}

export const useStore = (): any => { // Andere Komponenten verwenden diese Methode, um das Store-Objekt abzurufen return inject(mainStoreSky)
}

Implementieren der Methoden mapState, mapMutations und mapActions

exportiere const mapState = () => {
  const store = useStore()
  store.state zurückgeben
}

export const mapActions = (Ereignisname: Zeichenfolge) => {
  const store = useStore()
  return (...args: any[]) => store.dispatch(Ereignisname, ...args)
}

export const mapMutations = (Ereignisname: Zeichenfolge) => {
  const store = useStore()
  return (...args: beliebig[]) => store.commit(Ereignisname, ...args)
}

Wird in Komponenten verwendet

// speichern/index.ts
importiere { createStore } von '../sky-vuex/index'

exportiere Standard createStore({
  Zustand: {
    Alter: 18
  },
  Mutationen:
    setAge(Status: beliebig, Daten: Zahl) {
      Zustand.Alter = Daten
    }
  },
})

// Startseite.vue
<Vorlage>
  <div Klasse="Startseite">
    <button @click="handleAge(23)">Daten ändern</button>
    <h1>{{ Staat.Alter }}</h1>
  </div>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von 'vue'
importiere { useStore, mapActions, mapMutations } von '@/sky-vuex/index'

exportiere StandarddefiniereKomponente({
  Name: "Home",
  aufstellen() {
    const store = useStore()

    const handleAge = mapMutations('setAge')
    // const handleAge = mapActions('setAge')

    // const handleAge = () => {
    // speichern.dispatch('setAge', 5)
    // }

    zurückkehren {
      Status: store.state,
      Griffalter,
    }
  },
})
</Skript>

Zusammenfassen

Bisher wurden die grundlegenden Vuex-Funktionen implementiert. Du kannst es selbst üben und optimieren. Wenn du Fragen hast, kannst du sie gerne stellen

Dies ist das Ende dieses Artikels über die Verwendung von provide in vue3 zur Implementierung der Statusverwaltung. Weitere Informationen zu vue3 provide zur Implementierung der Statusverwaltung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!