So implementieren Sie das Zurücksetzen des Leerlaufzustands in Vuex

In diesem Artikel wird hauptsächlich die Vuex-Lösung zum Zurücksetzen des Leerlaufzustands vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

Vorwort

Für große einseitige Anwendungen (im Folgenden als Spa bezeichnet) verwenden wir häufig den Statusmanager vuex, um die Statusfreigabe und Statusübertragung zwischen Komponenten zu lösen. Frage. Diese Art der Anwendung kann von Dutzenden Einzelseiten bis hin zu Hunderten Einzelseiten reichen. Durch den häufigen Routenwechsel gibt es in Vuex immer mehr Zustände, die jeder Route entsprechen. Um die ultimative Optimierung der Seite zu erreichen, müssen wir diese Ruhezustände zurücksetzen, um den belegten Speicherplatz zu reduzieren.

Welcher Status kann zurückgesetzt werden?

vuex legt Wert auf die Verwendung zentraler Speicherung, um den Status aller Komponenten der Anwendung zu verwalten, aber wir legen wirklich den gesamten Status fest Die Verarbeitung im Geschäft wird für Sie sehr schmerzhaft sein, sich zu entwickeln. Wenn Sie eine gute Kontrolle darüber haben möchten, welche Daten zur Verwaltung in den Speicher gestellt werden müssen, müssen Sie zunächst verstehen, welches Problem mit Vuex gelöst wird. Auf der offiziellen Vuex-Website wird darauf hingewiesen, dass es darum geht, das Problem der gemeinsamen Nutzung mehrerer Komponenten zu lösen. Anschließend können wir den gemeinsamen Status mehrerer Komponenten zur Verwaltung in den Speicher stellen. Die gemeinsame Nutzung mehrerer Komponenten erfolgt hier häufig über eine übergreifende Weiterleitung einzelner Komponenten -seitige Anwendungen. Wenn der Store nur von mehreren Komponenten gemeinsam genutzte Zustände speichert, müssen wir den Zustand in Vuex nicht bereinigen, da diese Zustände jederzeit verwendet werden.

Da Geschäftsszenarien immer komplexer werden, wird viel Logik für die Interaktion mit dem Hintergrund in Komponenten gepackt, sodass der Code sehr chaotisch wird und Vuex nicht vollständig genutzt wird. Zu diesem Zeitpunkt können wir die Logik der Interaktion mit der Backend-API zur Verarbeitung in die Aktion in Vuex einfügen, und der vom Backend zurückgegebene Status wird natürlich in die Geschäftsverwaltung übernommen. Nach dieser Verarbeitung ist die Komponente nur noch für das Rendern der Daten verantwortlich, und die Logik ist sehr klar. Zu diesem Zeitpunkt gibt es im Speicher immer mehr Zustände, die der Komponente entsprechen, wenn das Routing wechselt, und diese Zustände müssen manuell bereinigt werden.

Viele Lösungen haben Kompromisse. Wenn die Daten, die mit der Hintergrund-API interagieren, in der Komponente platziert werden, besteht keine Notwendigkeit, sie zu bereinigen, aber die Codelogik wird chaotischer. Darüber hinaus können Plug-Ins wie Vue-Devtools wie Vuex die Änderungen in den einzelnen Anforderungsdaten nicht überwachen ...

Wann muss der Status zurückgesetzt werden?

Der gewünschte Effekt: Wenn das Routing umgeschaltet wird, wird der Status in Vuex zurückgesetzt, der der vorherigen Route entspricht. Es gibt jedoch keine Eins-zu-Eins-Entsprechung zwischen Routing und Vuex. Wenn wir diesen Effekt erreichen wollen, müssen wir dies tun Pflegen Sie eine Routing- und Vuex-Modulbeziehung. Dies ist sehr umständlich. Es ist besser, alle Zustände in vuex zurückzusetzen, wenn sich die Route ändert.

So bereinigen Sie den Ruhezustand in vuex

Das Folgende wird in Kombination mit meinem Github-Beispiel erklärt, wenn wir eine einseitige Anwendung erstellen Wenn Sie die Route wechseln, wird der Leerlaufstatus gelöscht.

Transformieren Sie den Modulstatus der der Route entsprechenden Komponente

Im Beispiel ist das Geschäft in mehrere Module aufgeteilt und der der Route entsprechende Komponentenstatus ist Im entsprechenden Modul platziert, wird der von mehreren Komponenten gemeinsam genutzte Status im Speicher der obersten Ebene verwaltet. Es ist ungefähr wie folgt:

// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules: { // 每个路由对应的 module
    page1,
    page2,
    page3,
    page4,
    page5
  },
  plugins: __DEV__ ? [createLogger()] : [],
  strict: __DEV__ ? true : false
});

Der Status des Moduls, das der Routenseite1 entspricht, hat die Form:

// store/modules/page1.js
const state = {
   // 列表数据
   page1Data: [],
   // 标题数据
   page1Title: ''
}

Diese Daten werden zurückgegeben und kopiert, indem wir die Backend-API aufrufen Wenn sich die Route ändert, müssen Sie für diese Daten die Initialisierungsdaten extrahieren und eine Identifikationsmethode initState() verfügbar machen, die zurückgesetzt werden muss, was bedeutet, dass sie zurückgesetzt werden muss, wenn sich die Route ändert. Natürlich ist dieser Methodenname a Konvention, und Sie können ihn auch als einen anderen Namen definieren. Nach der Transformation:

// store/modules/page1.js
// 放置你要重置的数据
const initState = {
  page1Data: [],
}

// state
const state = {
  // 参数解构
  ...initState,

  // 路由改变不想重置的数据
  page1Title: '',
  initState(){
    return initState
  }
}

Globale Modulkonfiguration

Globalen Mutationsereignistyp definieren

// store/types.js
export const RESET_STATES = 'resetStates'

Globale Mutation definieren

// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

  const mState = state[moduleState];

  if (mState.initState && typeof mState.initState === 'function') {

    const initState = mState.initState();

    for (const key in initState) {

      mState[key] = initState[key];
    }
  }

}

export default {

  [types.RESET_STATES](state, payload) {

    for (const moduleState in state) {

      resetState(state, moduleState);
    }
  },

}

Globale Aktion definieren

// store/action.js
import * as types from './types'

export default {
  // rest state action
  resetStates:function (context, payLoad) {

    context.commit(types.RESET_STATES, payLoad);
  }
}

Routenumschaltung löst Rücksetzmethode aus

Jetzt ist alles bereit, Sie müssen nur noch die Rücksetzmethode auslösen, wenn sich die Route ändert, in der Eingabe-Vue-Datei Verarbeitung

// components/app.vue
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

      ...mapActions({
        resetStates: "resetStates"
      })
    },

    watch: {

      $route(to, from) {
        // 路由改变发起重置
        this.resetStates();
      }
    }
  }
</script>

Wenn in Ihrem Chrome-Browser vuejs-devtools installiert ist, können Sie beim Routenwechsel den Rücksetzvorgang der vorherigen Routing-Daten deutlich erkennen.

Zusammenfassung

Klicken Sie hier für Beispiele. Unser Vuex-Zustands-Reset besteht hier darin, bei jedem Routenwechsel die Zustände in allen Geschäften zu durchlaufen und die Eigenschaften in initState() zurückzusetzen. Es wäre jedoch besser, wenn wir den Zustand zurücksetzen könnten, der der aktuellen Route entspricht zwischen Routing und Modulen in der Filiale. Hier ist nur eine Lösung zum Zurücksetzen des Vuex-Status. Wenn Sie eine bessere Lösung haben, hinterlassen Sie bitte eine Nachricht. Wenn etwas unangemessen ist, können Sie gerne einen Kommentar hinterlassen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So verweisen Sie auf Ali-Schriftsymbole in Vue

Über die tatsächliche Verwendung von log4js in Express

So implementieren Sie die WebSocket-Funktion mit NodeJS

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Zurücksetzen des Leerlaufzustands in Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!