Vuex kombiniert Localstorage, um Speicheränderungen dynamisch zu überwachen

In diesem Artikel wird hauptsächlich die detaillierte Erklärung von Vuex in Kombination mit Localstorage zur dynamischen Überwachung von Speicheränderungen vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen einen Blick darauf

Anforderung: Verschiedene Komponenten teilen die gleichen Daten. Wenn eine Komponente die Daten ändert, können auch andere Komponenten auf die Änderung reagieren.

Analyse: Vue kann lokale Speicheränderungen nicht überwachen. Localstorage wird hauptsächlich zum Übertragen von Werten zwischen verschiedenen Seiten verwendet, während Vue zum Übertragen von Werten zwischen Komponenten geeignet ist. Für Komponenten, die dieselben Daten teilen und die Informationen speichern oder die Daten nicht verlieren möchten, wenn die Seite aktualisiert wird (der von vuex gespeicherte Wert geht verloren, wenn die Seite aktualisiert wird, und localstorage wird im lokalen Browser gespeichert), können Sie dies tun Verwenden Sie die Methode vuex+localstorage.

Über den Unterschied zwischen Vuex und Storage

1. Der wichtigste Unterschied: Vuex wird im Speicher gespeichert, während Localstorage lokal in Form von Dateien gespeichert wird

2. Anwendungsszenarien: Vuex wird zum Übertragen von Werten zwischen Komponenten verwendet, während Localstorage hauptsächlich zum Übertragen von Werten zwischen verschiedenen Seiten verwendet wird.

3. Dauerhaftigkeit: Der in vuex gespeicherte Wert geht verloren, wenn die Seite aktualisiert wird, localstorage jedoch nicht.

Hinweis: Viele Studenten denken, dass localstorage anstelle von vuex verwendet werden kann. Dies ist zwar für unveränderte Daten möglich, aber wenn zwei Komponenten eine Datenquelle (Objekt oder Array) gemeinsam nutzen, ändert eine der Komponenten die Daten Quelle: Wenn Sie möchten, dass eine andere Komponente auf die Änderung reagiert, kann localstorage dies nicht tun. Der Grund ist Unterschied 1.

Implementierungsprozess: Nehmen Sie die Homepage, um Benutzer-Avatar-Informationen anzuzeigen und persönliche Informationen in der Header-Komponente der öffentlichen Komponente zu ändern. Wenn der Benutzer persönliche Informationen ändert, ändert sich das Bild auf der Homepage Avatar-Informationen werden nicht jedes Mal gespeichert und aktualisiert. Nachdem der Benutzer die Änderung vorgenommen hat, kann er oder sie die Änderungen nur sehen, indem er die Seite aktualisiert oder von anderen Seiten zurückkehrt, d. h. die neu festgelegten Avatar-Informationen und nur den Kerncode angezeigt.

1. Definieren Sie zunächst eine Variable im Status. State ist für die Speicherung der Statusdaten der gesamten Anwendung verantwortlich. Sie können this.$store.state verwenden, um den Status später direkt abzurufen. Sie können auch die von vuex bereitgestellte Hilfsfunktion „mapState“ verwenden, um den Status berechneten Eigenschaften zuzuordnen.

const state = {
 imgInfo:null //首页头像信息

}

2.Mutationen speichern lokale Speicherinformationen. Mutationen können den Status ändern. Dabei handelt es sich im Wesentlichen um eine Funktion zur Verarbeitung von Daten, die den eindeutigen Parameterwertstatus erhält. Die definierte Mutation muss eine synchrone Funktion sein. this.$store.commit(mutationName) ist eine Methode zum Auslösen einer Mutation oder verwendet die Hilfsfunktion mapMutations, um die Triggerfunktion direkt Methoden zuzuordnen, sodass sie direkt in der Elementereignisbindung verwendet werden kann.

export const SETIMGINFO = 'SETIMGINFO'
[SETIMGINFO] (state,info) {
 state.imgInfo=info
 localStorage.setItem('imgInfo',info)
 }

3. Holen Sie sich die lokalen Speicherinformationen im Getter. Einige Zustände erfordern eine sekundäre Verarbeitung, sodass Sie Getter verwenden können. Greifen Sie über this.$store.getters.valueName auf den abgeleiteten Status zu. Oder verwenden Sie direkt die Hilfsfunktion mapGetters, um sie lokal berechneten Eigenschaften zuzuordnen.

getImgInfo(state){
  if(localStorage.getItem('imgInfo')){
  state.imgInfo=localStorage.getItem('imgInfo')
  }
  return state.imgInfo
 }

4. Verweisen Sie auf die MapMutations-Funktion auf der Seite, die auf dem Speicher ausgeführt werden muss

import {mapMutations} from 'vuex' //引入mapMutations
 ...mapMutations([      
  'SETIMGINFO'
  ]),
this.SETIMGINFO(this.imgInfo) 
 //在需要的地方引用 mutations里面定义的方法

5. Verweisen Sie auf die Hilfsfunktion „mapGetters“ auf der Seite, auf der Speicherinformationen abgerufen werden müssen.

import {mapGetters} from 'vuex'
computed:{
  ...mapGetters([   
  'getImgInfo'
  ])
 },
watch:{ //动态监听state的变化，实时改变页面的数据
  getImgInfo: function(li) { //li就是改变后的state里面的imgInfo
  let vm = this;
   this.imgInfo=li //data声明一个变量，在html引用。如果storage的值发生变化就实时刷新变量的值。
  }
 },

Verweis auf den Wert von vuex in der Vorlage

<img :src="imgInfo?imgInfo:info.avatar"> 
//三元不等式，如果state发生变化有值就赋值给img标签，如果没有即刚进页面就赋值给create生命周期函数中从接口读出来的数据

Verwandte Empfehlungen:

So implementieren Sie die Übergabe dynamischer Abfrageparameter im Vue-Router

Das obige ist der detaillierte Inhalt vonVuex kombiniert Localstorage, um Speicheränderungen dynamisch zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!