So implementieren Sie Datenpersistenz mit dem Vuex-Drittanbieterpaket

Zweck:

Ermöglichen Sie die gleichzeitige lokale Speicherung der in Vuex verwalteten Statusdaten. Sie können auf die Einrichtung eines eigenen Lagers verzichten.

• Während des Entwicklungsprozesses müssen Benutzerinformationen (Name, Avatar, Token) in Vuex und lokal gespeichert werden.
• Wenn auch andere Module persistent sein müssen, werden sie ebenfalls lokal gespeichert

1) Erstens: Wir müssen ein Vuex-Plug-In vuex-persistedstate installieren, um die Vuex-Statuspersistenz zu unterstützen.

npm und vuex-persistedstate

2) Dann: Erstellen Sie eine Moduldatei im Ordner src/store und erstellen Sie user.js und cart.js unter Modulen

src/store/modules/user.js

// Benutzermodul export default {
  Namespace: wahr,
  Zustand () {
    zurückkehren {
      // Benutzerinformationsprofil: {
        Ausweis: '',
        Avatar: '',
        Spitzname: '',
        Konto: '',
        Handy: '',
        Token: ''
      }
    }
  },
  Mutationen:
    // Benutzerinformationen ändern, Payload ist das Benutzerinformationsobjekt setUser (state, payload) {
      Status.Profil = Nutzlast
    }
  }
}

3) Weiter: Importieren Sie das Benutzermodul in src/store/index.js.

importiere { createStore } von 'vuex'

Benutzer aus „./modules/user“ importieren

exportiere Standard createStore({
  Module:
    Benutzer
  }
})

4) Zum Schluss: Verwenden Sie das Plugin vuex-persistedstate für Persistenz

importiere { createStore } von 'vuex'
+Importieren Sie createPersistedstate von „vuex-persistedstate“.

Benutzer aus „./modules/user“ importieren

exportiere Standard createStore({
  Module:
    Benutzer
  },
+ Plugins: [
+ erstellePersistedstate({
+ Schlüssel: 'erabbit-client-pc-store',
+ Pfade: ['Benutzer']
+ })
+ ]
})

Beachten:

• ===> Standardmäßig wird es im localStorage gespeichert
• ===> Schlüssel ist der Schlüsselname zum Speichern von Daten
• ===> Pfade sind die im Status gespeicherten Daten. Wenn es sich um bestimmte Daten unter dem Modul handelt, muss der Modulname hinzugefügt werden, z. B. user.token
• ===> Änderungen an lokalen Speicherdaten sind erst sichtbar, nachdem der Status geändert und ausgelöst wurde.

Zusammenfassen:

• Implementieren Sie Datenpersistenz in Vuex basierend auf Drittanbieterpaketen
• Die Bedingung, die Persistenz auslöst, ist, dass sich der Zustand ändert

Dies ist das Ende dieses Artikels über die Verwendung des Vuex-Drittanbieterpakets zur Implementierung der Datenpersistenz. Weitere relevante Inhalte zur Vuex-Datenpersistenz 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!