Explicación detallada del uso de Vuex para la gestión de menús

La ventaja de Vuex se manifiesta solo en la gestión de estados complejos.

Si en el proyecto hay menús de varios niveles y varios menús del mismo nivel distribuidos en diferentes componentes, en un momento dado, solo hay un menú resaltado en cada nivel del proyecto. Además de cambiar la ruta al saltar al menú, el menú correspondiente también debe estar resaltado (el anterior debe restaurarse al estado no resaltado), esto es un excelente escenario para usar Vuex.

Gestión simple del menú mediante operaciones DOM

La gestión del menú mediante DOM, la idea subyacente es: al hacer clic en el menú, pasar el objeto de evento al gestor de eventos, para que el menú resaltado actual deje de estar resaltado y el menú clicado se resalte.

<div class="menu-url">
 <span class="active userList" @click="menuClicked($event, 'userList')">Registro</span>
 <span class="chargeList" @click="menuClicked($event, 'chargeList')">Recarga</span>
 <span class="buyList" @click="menuClicked($event, 'buyList')">Compra</span>
 <span class="bangList" @click="menuClicked($event, 'bangList')">Vencimiento</span>
 <span class="withDrawList" @click="menuClicked($event, 'withDrawList')">Retiro</span>
</div>

menuClicked (event, url) {
 // El menú resaltado actual no está resaltado
 const currentActiveLink = this.querySelector('.active');
 currentActiveLink.classList.remove('active');
 // Resaltar el menu que se hizo clic
 event.target.classList.add('active');
 // salto de ruta
 this.$router.push(`/panel/list/${url}`);
},

Aunque se ha logrado que el menu resalte al hacer clic, hay un bug: cada vez que se inicializa, el menu predeterminado se vuelve resaltado, si en este momento el usuario recarga la página manualmente en el menu que no está resaltado por defecto, se producirá un error de resaltado del menu (por ejemplo, después de recargar la página en la página buylist, el contenido de la página sigue estando en buylist, pero el menu resaltado se convierte en userlist).

Para resolver este bug, es necesario almacenar el estado del menu en el almacenamiento local (no cambia el estado de almacenamiento al recargar), las opciones de almacenamiento local pueden ser diferentes, aquí no se discute, pero se puede afirmar que DOM + El esquema de control de resaltado del menu de almacenamiento local se vuelve difícil de mantener a medida que el proyecto se hace más grande.

Es el momento de que vuex entre en escena.

Gestión del menú con vuex

Para gestionar el menú con vuex, es necesario planificar el nivel del menú antes del desarrollo, para asignar el state y el mutations en vuex.

Planificación de nivel

Determinar qué es el menú de nivel superior y qué es el menú de nivel inferior en el proyecto, y así sucesivamente... Es necesario prestar atención aquí, para simplificar las operaciones, los menús del mismo nivel se nombran con nombres diferentes, de modo que en vuex no se necesita prestar atención a qué página pertenece el menú, solo prestar atención al estado. El nivel de menú generalmente es el siguiente:

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

Asignación de `state` y `mutations` en vuex　

Cada nivel de menú ocupa un `state` diferente, en cuanto a `mutations`, en este ejemplo, se escribió un `mutations` diferente para cada `state`, en el trabajo real para reducir al máximo el uso de código repetido, para la gestión del estado de menu se puede escribir solo un `mutations`, mediante la transmisión de parámetros para determinar qué nivel y qué menu se cambia.

Es necesario tener en cuenta que el estado de vuex se inicializa de nuevo después de que la página se actualiza, lo que claramente no coincide con las funciones necesarias para el menú de gestión (excepto que se activa de manera activa, otras operaciones no pueden tener un impacto en el menú). Se puedevuex-persistedstate Cambiar el ciclo de vida predeterminado de vuex, el siguiente código de ejemplo almacena el estado de vuex en los cookies:

js

const store = new Vuex.Store({
 state: {
  // Inicialización
  activeFirstMenu: 'firstMenu1',
  activeSecondMenu: 'secondMenu1',
 },
 mutations: {
  // Cambiar el menú de primer nivel
  changeFirstActiveMenu (state, menu) {
   state.activeFirstMenu = menu;
  },
  // Cambiar el menú de segundo nivel
  changeSecondActiveMenu (state, menu) {
   state.activeSecondMenu = menu;
  }
 },
});

Renderizado en el componente

Cargar dinámicamente la clase resaltada en template, controlada por el estado de 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>

Una técnica útil al escribir js: es mejor que el path de la ruta y el nombre del menú resaltado sean iguales, ya que el cambio de ruta y el resaltado del menú están directamente relacionados, lo que puede reducir un parámetro:

data () {
 return {
  // Inicialización
  activeMenu: {
   // El nombre del menú es el mismo que el path correspondiente de la ruta
   secondMenu1: '',
   secondMenu2: '',
   secondMenu3: '',
  },
 };
},
computed: {
 activeMenuName () {
  // Detectar los cambios en activeSecondMenu en vuex
  return this.$store.state.activeSecondMenu;
 }
},
methods: {
 menuClicked(path) {
  // Deshabilitar el resaltado del tab actual
  this.activeMenu[this.activeMenuName] = false;
  // Actualizar el estado vuex y el resaltado del menú
  this.$store.commit("changeSecondActiveMenu", path);
  this.activeMenu[this.activeMenuName] = true;
  // El cambio de ruta y el nombre del menú corresponden al mismo path 
  this.$router.push(`/somePath/${path}`);
 },
 init () {
  // Recargar la página para restablecer el menú tab resaltado correctamente
  this.activeMenu[this.activeMenuName] = true;
 },
},
mounted: {}}
 this.init();
},

Otro

Optimización de Vuex

Como se ha mencionado anteriormente, en el trabajo real para lograr un mayor grado de reutilización de código, para la gestión de estado de una categoría específica, se puede escribir solo un mutations, pasando parámetros (Carga útil ）Judgment of change content. Taking menu management as an example, the following optimization can be performed:

El Vuex optimizado es como sigue:

const store = new Vuex.Store({
 // Otro código omitido
 mutations: {
  // Código optimizado, combinación de changeFirstActiveMenu y changeSecondActiveMenu
  changeActiveMenu (state, menuInfo) {
   state[menuInfo.menuHierarchy] = menuInfo.name;
  }
 }
});

La parte de js del componente después de la optimización es como sigue:

methods: {
 menuClicked(path) {
  // Otro código omitido destacado
  // Código optimizado: cambio de menú de primer y segundo nivel al mismo mutation
  this.$store.commit("changeActiveMenu", {
   menuHierarchy: 'activeFirstMenu',
   name: path,
  });
  this.$store.commit("changeActiveMenu", {
   menuHierarchy: 'activeSecondMenu',
   name: path,
  });
  // Otro código omitido
 },
},

Esto es todo el contenido del artículo, esperamos que haya sido útil para su aprendizaje y que todos nos apoyen en el tutorial de clamor.

Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume la responsabilidad legal relevante. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w