Comment utiliser vuex pour implémenter la gestion des menus

Cet article présente principalement l'explication détaillée de l'utilisation de vuex pour la gestion des menus. Maintenant, je le partage avec vous et le donne comme référence.

Les avantages de vuex ne peuvent être réalisés que dans une gestion d'état complexe.

S'il y a plusieurs niveaux de menus dans le projet et que plusieurs menus du même niveau sont dispersés dans différents composants, il n'y aura qu'un seul point culminant de chaque niveau du menu en même temps dans le projet. Lorsque le menu saute, en plus du changement de routage, le menu correspondant doit également être mis en surbrillance (précédemment restauré à l'état non mis en surbrillance). C'est un scénario parfait pour utiliser vuex.

Utilisez les opérations DOM pour une gestion simple des menus

Utilisez DOM pour la gestion des menus L'idée derrière cela est la suivante : lorsque vous cliquez sur le menu, l'objet événement est transmis au fichier. gestionnaire d'événements, vous souhaitez que le menu actuellement en surbrillance ne soit pas mis en surbrillance, puis que le menu sur lequel vous avez cliqué soit mis en surbrillance.

<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>

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}`);
},

Bien que le menu soit mis en surbrillance lorsque vous cliquez pour basculer, il y a un bug : chaque initialisation mettra le menu par défaut en surbrillance. Si le menu n'est pas mis en surbrillance par défaut à ce moment-là, dans le menu. menu, l'utilisateur actualise manuellement la page, ce qui entraînera des erreurs de mise en surbrillance du menu (par exemple, après avoir actualisé la page sur la page de liste d'achat, le contenu de la page reste toujours sur la liste d'achat, mais le menu en surbrillance devient une liste d'utilisateurs).

Si vous souhaitez résoudre ce bug, vous devez stocker l'état du menu localement (l'actualisation ne modifie pas l'état de stockage. Vous pouvez choisir différentes solutions pour le stockage local, qui ne seront pas abordées ici, mais cela). est certainement DOM + stockage local. Le schéma de contrôle de la mise en évidence des menus deviendra difficile à maintenir à mesure que le projet grandit.

Il est maintenant temps pour vuex d'entrer en scène.

Utiliser vuex pour la gestion des menus

Utiliser vuex pour la gestion des menus nécessite 在开发前就规划好菜单的层级 afin d'attribuer state et mutations dans vuex.

Niveau de planification

Déterminer quels menus du projet sont des menus de premier niveau, lesquels sont des menus de deuxième niveau, et ainsi de suite... Il est à noter ici que afin de simplifier le opération, les menus du même niveau sont étiquetés avec un nom différent afin que dans vuex vous n'ayez pas besoin de faire attention à la page à laquelle appartient le menu, faites simplement attention au statut. Le niveau de menu est généralement le suivant :

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

Attribuer un "état" et des "mutations" dans vuex

Les menus à différents niveaux occupent respectivement un "état", comme pour les « mutations », dans cet exemple, une « mutation » est écrite pour chaque « état » différent. Dans le travail réel, afin de réduire la réutilisation du code, vous ne pouvez écrire qu'une seule « mutation » pour la gestion des états du menu. , et déterminez lequel doit être modifié en passant les paramètres Niveau et menu correspondant.

A noter que l'état de vuex sera réinitialisé après le rafraîchissement de la page, ce qui est évidemment incohérent avec les fonctions nécessaires à la gestion du menu (hormis le déclenchement actif, les autres opérations ne peuvent pas affecter le menu ). Vous pouvez modifier le cycle de vie par défaut de vuex via vuex-persistedstate. L'exemple de code suivant stocke l'état de vuex dans un cookie :

js

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

Rendu dans le composant<.>

Le chargement dynamique de la classe en surbrillance dans le modèle est contrôlé par l'état dans vuex :

<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>

Il y a une astuce lors de l'écriture de js : le chemin de routage et le menu en surbrillance correspondant le nom doit être le même, car le saut de routage Le transfert est directement lié au menu de surbrillance, qui peut réduire un paramètre :

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();
},

Autres

Optimisation pour vuex

Comme mentionné ci-dessus, afin d'obtenir une plus grande réutilisation du code dans le travail réel, vous ne pouvez écrire qu'une seule mutation pour une certaine catégorie de gestion de l'état et déterminer le contenu du changement en passage des paramètres (Payload). En prenant comme exemple la gestion des menus, l'optimisation suivante peut être effectuée :

L'optimisation vuex est la suivante :

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

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

La partie composant js est optimisée comme suit :

methods: {
 menuClicked(path) {
  // 其他代码略高亮

  // 优化后代码：更改一级和二级菜单触发同个 mutation
  this.$store.commit("changeActiveMenu", {
   menuHierarchy: 'activeFirstMenu',
   name: path,
  });

  this.$store.commit("changeActiveMenu", {
   menuHierarchy: 'activeSecondMenu',
   name: path,
  });

  // 其他代码略
 },
},

Ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.

Articles connexes :

Comment éviter les rendus répétés à l'aide de React

Comment implémenter la fonction de disposition en grille à l'aide de vue

Introduction détaillée à l'ajout de la fonction glisser-déposer à Modal dans Bootstrap

Comment obtenir un effet de prévisualisation dans JS

Utilisez Créer un projet avec three.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!