Spiegazione dettagliata dell'uso di Vuex per la gestione del menu

L'virtù di vuex si manifesta solo nella gestione di stati complessi.

Se nel progetto ci sono menu multipli e diversi componenti distribuiti con menu dello stesso livello, in un momento dato, ogni livello di menu del progetto deve avere solo uno luminoso, quando si passa da un menu all'altro oltre alla modifica delle rotte, il menu corrispondente deve anche essere luminoso (il precedente deve tornare non luminoso), questo è un'ottima scena per l'uso di vuex.

Gestione del menu semplice tramite operazioni DOM

Gestione del menu tramite DOM, l'idea dietro di essa è: durante il clic del menu, passare l'oggetto evento all'elaboratore di eventi, per far sì che il menu attualmente luminoso non sia luminoso e che il menu cliccato diventi luminoso.

<div class="menu-url">
 <span class="active userList" @click="menuClicked($event, 'userList')">Registrazione</span>
 <span class="chargeList" @click="menuClicked($event, 'chargeList')">Ricarica</span>
 <span class="buyList" @click="menuClicked($event, 'buyList')">Acquisto</span>
 <span class="bangList" @click="menuClicked($event, 'bangList')">Scadenza</span>
 <span class="withDrawList" @click="menuClicked($event, 'withDrawList')">Ritiro</span>
</div>

menuClicked (event, url) {
 // Il menu highlightato corrente non è highlightato
 const currentActiveLink = this.querySelector('.active');
 currentActiveLink.classList.remove('active');
 // Highlight del menu cliccato corrente
 event.target.classList.add('active');
 // Transizione di rotta
 this.$router.push(`/panel/list/${url}`);
},

Così facendo, sebbene sia stato implementato il highlight del menu quando si fa clic per passare, c'è un bug: ogni volta che si inizializza, il menu predefinito diventa highlightato, se in quel momento si fa refresh del menu non highlightato dall'utente, può causare un errore di highlight del menu (ad esempio, dopo aver refreshato la pagina nella pagina buylist, il contenuto della pagina rimane ancora buylist, ma il menu highlightato diventa userlist).

Per risolvere questo bug, è necessario memorizzare localmente lo stato del menu (il refresh non cambia lo stato di memorizzazione), ci sono diverse soluzioni per la memorizzazione locale, che non verranno discusse qui, ma è certo che il metodo di controllo dell'highlight del menu tramite DOM + memorizzazione locale diventerà difficile da mantenere man mano che il progetto diventa più grande.

È giunto il momento dell'arrivo di vuex.

Gestione dei menu con vuex

Per gestire i menu con vuex è necessario pianificare la gerarchia dei menu prima della sviluppo, in modo da assegnare `state` e `mutations` in vuex.

Pianificazione della gerarchia

Determinare quali sono i menu di primo livello e quali sono i menu di secondo livello nel progetto, ecc. Ecco alcune cose da notare: per semplificare le operazioni, i menu dello stesso livello sono denominati in modo diverso, così in vuex non c'è bisogno di preoccuparsi di quale pagina appartiene al menu, è sufficiente concentrarsi sullo stato. La gerarchia dei menu di solito è come segue:

| |-root
| |
| |-first-menu1
| |   |- second-menu1
| |   |- second-menu2
| |   |- second-menu3
| |
| |-first-menu2
|    |- second-menu3
|    |- second-menu4
|    |- second-menu5

Assegnazione di `state` e `mutations` in vuex　

Ogni livello di menu occupa un singolo `state`, per quanto riguarda `mutations`, in questo esempio ogni `state` ha una `mutations` corrispondente. Nel lavoro pratico, per ridurre al minimo la ripetizione del codice, per la gestione dello stato del menu è possibile scrivere una singola `mutations`, utilizzando i parametri per determinare quale livello e quale menu deve essere modificato.

È importante notare che vuex riinizializza lo stato dopo il refresh della pagina, il che non corrisponde alle funzionalità necessarie per la gestione del menu (tranne per le operazioni attivate manualmente, altre operazioni non possono influenzare il menu). È possibilevuex-persistedstate Modifica il ciclo di vita predefinito di vuex, l'esempio di codice seguente tiene lo stato vuex memorizzato nei cookie:

js

const store = new Vuex.Store({
 state: {
  // Inizializzazione
  activeFirstMenu: 'firstMenu1',
  activeSecondMenu : 'secondMenu1',
 },
 mutations: {
  // Modifica il menu di primo livello
  changeFirstActiveMenu (state, menu) {
   state.activeFirstMenu = menu;
  },
  // Modifica il menu di secondo livello
  changeSecondActiveMenu (state, menu) {
   state.activeSecondMenu = menu;
  }
 },
});

Renderizzazione nel componente

Nel template caricare dinamicamente la classe evidenziata, controllata tramite lo stato di vuex:

<div class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu1 }" @click="menuClicked('secondMenu1')">secondMenu1</span>
</div>
<div class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu2 }" @click="menuClicked('secondMenu2')">secondMenu2</span>
</div>
<div class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu3 }" @click="menuClicked('secondMenu3')">secondMenu3</span>
</div>

Un trucco per scrivere js: il path di rotta e il nome del menu evidenziato devono essere gli stessi, poiché la transizione di rotta e l'evidenziazione del menu sono direttamente correlate; questo riduce un parametro:

data () {
 return {
  // Inizializzazione
  activeMenu: {
   // I nomi del menu sono uguali e corrispondono al path del percorso corrispondente
   secondMenu1: '',
   secondMenu2: '',
   secondMenu3: '',
  },
 };
},
computed: {
 activeMenuName () {
  // Verifica le variazioni di activeSecondMenu nello stato vuex
  return this.$store.state.activeSecondMenu;
 }
},
methods: {
 menuClicked(path) {
  // Annulla l'evidenziazione del tab corrente
  this.activeMenu[this.activeMenuName] = false;
  // Aggiorna lo stato vuex e l'evidenziazione del menu
  this.$store.commit("changeSecondActiveMenu", path);
  this.activeMenu[this.activeMenuName] = true;
  // La transizione di rotta path e il nome del menu corrispondono 
  this.$router.push(`/somePath/${path}`);
 },
 init () {
  // Aggiorna la pagina per ripristinare il tab del menu evidenziato correttamente
  this.activeMenu[this.activeMenuName] = true;
 },
},
mounted: {}}
 this.init();
},

Altri

Ottimizzazione di Vuex

Come già discusso, nella pratica lavorativa, per una maggiore realizzazione della ripetibilità del codice, per la gestione dello stato di una certa categoria può essere scritta solo una mutations, tramite la trasmissione di parametri (Payload ）giudizio del contenuto modificato. Prendiamo ad esempio la gestione del menu, è possibile ottimizzare come segue:

Vuex ottimizzato come segue:

const store = new Vuex.Store({
 // Altri codici omessi
 mutations: {
  // Codice ottimizzato, fusione di changeFirstActiveMenu e changeSecondActiveMenu
  changeActiveMenu (state, menuInfo) {
   state[menuInfo.menuHierarchy] = menuInfo.name;
  }
 }
});

La parte di codice JavaScript del componente ottimizzata è la seguente:

methods: {
 menuClicked(path) {
  // Altri codici omessi in evidenza
  // Codice ottimizzato: modifica il trigger del mutation per il menu di primo e secondo livello
  this.$store.commit("changeActiveMenu", {
   menuHierarchy: 'activeFirstMenu',
   name: path,
  });
  this.$store.commit("changeActiveMenu", {
   menuHierarchy: 'activeSecondMenu',
   name: path,
  });
  // Altri codici omessi
 },
},

Questo è tutto il contenuto dell'articolo, speriamo che sia utile per la tua apprendimento e che tu supporti fortemente il tutorial di grido.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, di proprietà dei rispettivi autori, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume alcuna responsabilità legale. Se trovi contenuti sospetti di copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito eliminerà immediatamente il contenuto sospetto di violazione del copyright.