Analyse des Problems des Datenverlusts durch erzwungene Aktualisierung von Vuex

vuex-persistenter Zustand

1. Kernprinzip: Alle Vuex-Daten im lokalen Speicher speichern, beim Aktualisieren der Seite Daten aus dem Cache abrufen und in Vuex einfügen
2. Herunterladen: $ npm install vuex-persistedstate -S
3. Einführung von Plugins in den Store

importiere persistenten Status von „vuex-persistedstate“
const store = neuer Vuex.Store({
  // ...
  Plugins: [persistedState()]
})

vuex-persistedstate verwendet standardmäßig localStorage zur Speicherung. Wenn Sie sessionStorage verwenden möchten, können Sie die folgende Konfiguration verwenden

importiere persistenten Status von „vuex-persistedstate“
const store = neuer Vuex.Store({
  // ...
  Plugins: [persistierter Status ({
      Speicher: window.sessionStorage
  })]
})

• Wenn Sie Cookies verwenden möchten, können Sie die folgenden Einstellungen verwenden
• Herunterladen: $ npm install js-cookie -S

Cookies von „js-cookie“ importieren;
importiere persistenten Status von „vuex-persistedstate“
const store = neuer Vuex.Store({
  // ...
  Plugins: [persistierter Status ({
      Lagerung:
		getItem: Schlüssel => Cookies.get(Schlüssel),
		setItem: (Schlüssel, Wert) => Cookies.set(Schlüssel, Wert),
		removeItem: Schlüssel => Cookies.remove(Schlüssel)
	}
  })]
})

sicher-ls

• Verschlüsselter Speicher
• Wenn wir Benutzerinformationen in vuex speichern, ist die Verwendung zwar viel bequemer, aber um das Problem des Datenverlusts beim Aktualisieren der Seite durch vuex zu lösen, verwenden wir das Plug-In vuex-persistedstate . vuex-persistedstate ist nicht verschlüsselt und die Benutzerinformationen werden im Cache angezeigt.
• Es ist sehr unsicher, daher müssen Sie secure-ls verwenden, um den Speicher zu verschlüsseln.
• Herunterladen: $ npm install secure-ls -S

importiere Vue von „vue“;
importiere Vuex von „vuex“;
importiere SecureLS von „secure-ls“;
importiere persistenten Status von „vuex-persistedstate“;

const ls = neues SecureLS({
	encodingType: "aes", // Verschlüsselungsmethode isCompression: false, // ob die Datenkomprimierung aktiviert werden soll encryptionSecret: "old-beauty" // 
});

Vue.use(Vuex);

exportiere standardmäßig neuen Vuex.Store({
	...
	Plugins: [persistedState({
		// Schlüssel: „123123“, // im Speicher zu speichernder Schlüssel
		Lagerung:
			getItem: Schlüssel => ls.get(Schlüssel),
			setItem: (Schlüssel, Wert) => ls.set(Schlüssel, Wert),
			removeItem: Schlüssel => ls.remove(Schlüssel)
		}
	})],
});

[Hinweis] vuex-persist（不兼容ie） vuex-persistedstate

Dies ist das Ende dieses Artikels über erzwungenen Datenverlust bei Vuex. Weitere relevante Inhalte zum Thema Datenverlust bei Vuex finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!