So verwenden Sie vuex in Kombination mit localstorage, um Speicheränderungen dynamisch zu überwachen

Dieses Mal zeige ich Ihnen, wie Sie Vuex in Kombination mit Localstorage verwenden, um Speicheränderungen dynamisch zu überwachen. Welche Vorsichtsmaßnahmen für die Verwendung von Vuex in Kombination mit Localstorage zur dynamischen Überwachung von Speicheränderungen gelten Schauen Sie mal rein.

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änderliche Daten möglich, aber wenn zwei Komponenten eine Datenquelle (Objekt oder Array) gemeinsam nutzen Wenn eine Komponente die Datenquelle ändert und möchte, dass eine andere Komponente auf die Änderung reagiert, kann localstorage dies nicht tun. Der Grund ist Unterschied 1.

Über das Vuex-Referenzdokument: http://vuex.vuejs.org/zh-cn/index.html

Implementierungsprozess: Benutzer-Avatar-Informationen auf der Homepage anzeigen, persönliche Informationen öffentlich ändern Wenn der Benutzer beispielsweise in der Header-Komponente persönliche Informationen ändert, ändert sich das Bild auf der Homepage in Echtzeit. Wenn die Avatar-Informationen nicht gespeichert und aktualisiert werden, kann der Benutzer die Änderungen erst nach jeder Änderung sehen Aktualisieren der Seite oder Zurückkehren von anderen Seiten, d. h. die neu eingestellten Avatar-Informationen, nur der Kerncode wird 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, die zum Auslösen einer Mutation verwendet wird, oder Sie können die Hilfsfunktion mapMutations verwenden, um die Triggerfunktion direkt Methoden zuzuordnen, sodass sie direkt für das Element Ereignis verwendet werden kann verbindlich.

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

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

5. Verweisen Sie auf die MapGetters-Hilfsfunktion

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

6. Verweis auf den Vuex-Wert in der Vorlage

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf andere Verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung einer Schneeflocken-Animation mit JS

So verwenden Sie Vue+ Canvas zur Implementierung einer mobilen Handschriftpad-Funktion

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vuex in Kombination mit localstorage, um Speicheränderungen dynamisch zu überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!