So implementieren Sie die Menüverwaltung mit Vuex

Dieser Artikel stellt hauptsächlich die detaillierte Erklärung der Verwendung von Vuex für die Menüverwaltung vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

Die Vorteile von vuex können nur im komplexen Zustandsmanagement realisiert werden.

Wenn es im Projekt mehrere Menüebenen gibt und mehrere Menüs derselben Ebene in verschiedenen Komponenten verstreut sind, gibt es im Projekt gleichzeitig nur eine Hervorhebung jeder Menüebene. Wenn das Menü springt, muss neben der Routing-Änderung auch das entsprechende Menü hervorgehoben werden (zuvor in den nicht hervorgehobenen Zustand zurückversetzt werden). Dies ist ein perfektes Szenario für die Verwendung von Vuex.

Verwenden Sie DOM-Operationen für die einfache Menüverwaltung

Verwenden Sie DOM für die Menüverwaltung. Die Idee dahinter ist: Wenn auf das Menü geklickt wird, wird das Ereignisobjekt an das übergeben Event-Handler möchten Sie, dass das aktuell hervorgehobene Menü nicht hervorgehoben wird und dann das angeklickte Menü hervorgehoben wird.

<p class="menu-url">
 <span class="active userList" @click="menuClicked($event, &#39;userList&#39;)">注册</span>
 <span class="chargeList" @click="menuClicked($event, &#39;chargeList&#39;)">充值</span>
 <span class="buyList" @click="menuClicked($event, &#39;buyList&#39;)">购买</span>
 <span class="bangList" @click="menuClicked($event, &#39;bangList&#39;)">到期</span>
 <span class="withDrawList" @click="menuClicked($event, &#39;withDrawList&#39;)">提现</span>
</p>

rrree

Obwohl dadurch die Menühervorhebung beim Klicken zum Wechseln erreicht wird, gibt es einen Fehler: Bei jeder Initialisierung wird das Standardmenü hervorgehoben. Wenn der Benutzer das nicht standardmäßig hervorgehobene Menü zu diesem Zeitpunkt manuell aktualisiert, wird dies dazu führen Fehler bei der Menühervorhebung (z. B. bleibt der Seiteninhalt nach dem Aktualisieren der Einkaufslistenseite weiterhin auf der Einkaufsliste, das hervorgehobene Menü wird jedoch zur Benutzerliste).

Wenn Sie diesen Fehler beheben möchten, müssen Sie den Menüstatus lokal speichern (das Aktualisieren ändert den Speicherstatus nicht). Sie können verschiedene Lösungen für die lokale Speicherung wählen, die hier jedoch nicht besprochen werden ist sicherlich DOM + lokaler Speicher. Das Schema zur Steuerung der Menühervorhebung wird schwieriger beizubehalten, wenn das Projekt größer wird.

Jetzt ist es an der Zeit, dass vuex auf den Plan tritt.

Verwendung von vuex für die Menüverwaltung

Die Verwendung von vuex für die Menüverwaltung erfordert 在开发前就规划好菜单的层级 , um state und mutations in vuex zuzuweisen.

Planungsebene

Bestimmen Sie, welche Menüs im Projekt Menüs der ersten Ebene, welche Menüs der zweiten Ebene usw. sind. Hier ist zu beachten, dass zur Vereinfachung die Bei der Bedienung werden Menüs auf derselben Ebene mit unterschiedlichen Namen beschriftet, sodass Sie in Vuex nicht darauf achten müssen, zu welcher Seite das Menü gehört, sondern nur auf den Status. Die Menüebene ist normalerweise wie folgt:

menuClicked (event, url) {
 // 当前高亮的 menu 非高亮
 const currentActiveLink = this.querySelector('.active');
 currentActiveLink.classList.remove('active');
 // 当前点击的 menu 高亮
 event.target.classList.add('active');
 // 路由跳转
 this.$router.push(`/panel/list/${url}`);
},

Zuweisen Sie „Zustand“ und „Mutationen“ in Vuex

Menüs auf verschiedenen Ebenen belegen jeweils einen „Zustand“. „Mutationen“, in diesem Beispiel entsprechen unterschiedliche „Zustände“ einer „Mutation“. Um die Wiederverwendung von Code zu reduzieren, kann in der tatsächlichen Arbeit nur eine „Mutation“ für die Statusverwaltung des Menüs geschrieben werden, und die Ebene und Der zu ändernde Pegel kann durch Parameterübergabe im entsprechenden Menü bestimmt werden.

Es ist zu beachten, dass der Status von Vuex nach der Aktualisierung der Seite neu initialisiert wird, was offensichtlich nicht mit den zum Verwalten des Menüs erforderlichen Funktionen vereinbar ist (mit Ausnahme der aktiven Auslösung können andere Vorgänge das Menü nicht beeinflussen). ). Sie können den Vuex-Standardlebenszyklus über vuex-persistedstate ändern. Der folgende Beispielcode speichert den Vuex-Status in einem Cookie:

js

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

Rendering in der Komponente

Laden Sie die hervorgehobene Klasse dynamisch in der Vorlage und steuern Sie sie über den Status in vuex:

const store = new Vuex.Store({
 state: {
  // 初始化
  activeFirstMenu: 'firstMenu1',
  activeSecondMenu : 'secondMenu1',
 },
 mutations: {
  // 更改一级菜单
  changeFirstActiveMenu (state, menu) {
   state.activeFirstMenu = menu;
  },
  // 更改二级二级菜单
  changeSecondActiveMenu (state, menu) {
   state.activeSecondMenu = menu;
  }
 },
});

Beim Schreiben von js gibt es einen Trick: Der Routing-Pfad und der entsprechende hervorgehobene Menüname sollten gleich sein , da das Routing von Sprüngen und das Hervorheben von Menüs in direktem Zusammenhang stehen, was einen Parameter reduzieren kann:

<p class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu1 }" @click="menuClicked(&#39;secondMenu1&#39;)">secondMenu1</span>
</p>
<p class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu2 }" @click="menuClicked(&#39;secondMenu2&#39;)">secondMenu2</span>
</p>
<p class="subMenu">
 <span :class="{ activeSecondMenu: activeMenu.secondMenu3 }" @click="menuClicked(&#39;secondMenu3&#39;)">secondMenu3</span>
</p>

Andere

Optimierung von vuex

Wie oben besprochen: Um die Wiederverwendung von Code in der tatsächlichen Arbeit in größerem Umfang zu realisieren, können Sie nur eine Mutation für eine bestimmte Kategorie der Statusverwaltung schreiben und den Änderungsinhalt durch Übergabe von Parametern (Payload) bestimmen. Am Beispiel der Menüverwaltung kann die folgende Optimierung durchgeführt werden:

vuex wird wie folgt optimiert:

data () {
 return {
  // 初始化
  activeMenu: {
   // menu 名称相同，和对应路由的 path 相同
   secondMenu1: '',
   secondMenu2: '',
   secondMenu3: '',
  },
 };
},
computed: {
 activeMenuName () {
  // 检测 vuex 中 activeSecondMenu 的变化
  return this.$store.state.activeSecondMenu;
 }
},
methods: {
 menuClicked(path) {
  // 取消当前 tab 高亮
  this.activeMenu[this.activeMenuName] = false;

  // 更新 vuex 状态及 menu 高亮
  this.$store.commit("changeSecondActiveMenu", path);
  this.activeMenu[this.activeMenuName] = true;

  // 路由跳转 path 和对应 menu 名称相同 
  this.$router.push(`/somePath/${path}`);
 },
 init () {
  // 刷新页面重置正确高亮菜单tab
  this.activeMenu[this.activeMenuName] = true;
 },
},
mounted: {
 this.init();
},

Der Komponenten-JS-Teil wird wie folgt optimiert:

const store = new Vuex.Store({
 // 其他代码略

 mutations: {
  // 优化后代码，合并 changeFirstActiveMenu 和 changeSecondActiveMenu
  changeActiveMenu (state, menuInfo) {
   state[menuInfo.menuHierarchy] = menuInfo.name;
  }
 }
});

The Oben habe ich alles zusammengestellt. Ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

So verhindern Sie wiederholtes Rendern mit React

So implementieren Sie die Grid-Layout-Funktion mit Vue

Detaillierte Einführung zum Hinzufügen der Drag-and-Drop-Funktion zu Modal in Bootstrap

So erzielen Sie einen Vorschaueffekt in JS

Verwenden Sie „Projekt mit three.js erstellen“

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Menüverwaltung mit Vuex. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!