vuex を使用してメニュー管理を実装する方法

この記事では主にvuexを使ったメニュー管理の詳細な説明を紹介しますので、参考にしてください。

vuex の利点は、複雑な状態管理でのみ実現できます。

プロジェクトに複数のレベルのメニューがあり、同じレベルの複数のメニューが異なるコンポーネントに分散している場合、メニューがジャンプすると、プロジェクト内で同時にメニューの各レベルのハイライトは 1 つだけになります。 、ルーティングの変更に加えて、対応するメニューも強調表示する必要があります (以前の非強調表示状態への復元)。これは vuex を使用するための完璧なシナリオです。

シンプルなメニュー管理に DOM 操作を使用する

メニュー管理に DOM を使用する その背後にあるアイデアは、メニューをクリックするときにイベント オブジェクトをイベント ハンドラーに渡し、現在ハイライトされているメニューをハイライト解除することです。クリックしたメニューを強調表示します。

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

クリックして切り替えるとメニューが強調表示されますが、初期化のたびにデフォルトのメニューが強調表示され、この時点でユーザーがデフォルト以外の強調表示されたメニューでページを手動で更新すると、メニューが強調表示されます。エラー (たとえば、購入リスト ページを更新した後、ページのコンテンツは購入リストに残りますが、強調表示されたメニューがユーザーリストに変わります)。

このバグを解決したい場合は、メニューのステータスをローカルに保存する必要があります (更新してもストレージのステータスは変わりません)。ここでは説明しませんが、DOM が有効であることは確かです。 + ローカル ストレージ コントロール メニューの強調表示。プロジェクトが大きくなるにつれて、ソリューションの保守が困難になります。

いよいよ vuex の登場です。

メニュー管理に vuex を使用する

メニュー管理に vuex を使用するには 在开发前就规划好菜单的层级 ，以便在 vuex 分配 state 和 mutations が必要です。

計画レベル

プロジェクト内のどのメニューが第 1 レベルのメニューで、どのメニューが第 2 レベルのメニューであるかを決定します。ここでは、操作を簡略化するために、同じレベルのメニューには名前が付けられていることに注意してください。 vuex では、メニューがどのページに属しているかに注意を払う必要はなく、ステータスにだけ注意してください。メニューレベルは通常次のとおりです:

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

vuex に `state` と `mutations` を割り当てます

異なるレベルのメニューがそれぞれ 1 つの `state` を占有します `mutations` については、この例では 1 つの対応する `state` を占めます。 ` は `mutations` と書かれていますが、実際の作業でのコードの再利用を減らすために、メニューの状態管理用の `mutations` は 1 つだけ記述し、パラメータを渡すことでどのレベルと対応するメニューを変更するかを決定できます。

ページが更新された後に vuex の状態が再初期化されることに注意してください。これはメニューの管理に必要な機能と明らかに矛盾しています (アクティブなトリガーを除き、他の操作はメニューに影響を与えることはできません)。 vuex のデフォルトのライフサイクルは、vuex-persistedstate を通じて変更できます。次のコード例では、vuex の状態を Cookie に保存します。 vuex の状態:

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

js を記述するときにコツがあります。ルート パスと対応する強調表示されたメニュー名は同じである必要があります。ルート ジャンプは強調表示されたメニューに直接関連しているため、パラメータを 1 つ減らすことができます:

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

その他

vuexの最適化について

前述したように、実際の作業でコードの再利用を高めるためには、特定のカテゴリの状態管理に対してミューテーションを1つだけ記述し、パラメータを渡すことで変更内容を決定することができます（ペイロード）。メニュー管理を例に挙げると、次の最適化を実行できます: vuex は次のように最適化されます:

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

コンポーネントの js 部分は次のように最適化されます:

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

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

上記は、皆さんのために私がコンパイルしたものです。今後も皆様のお役に立ちますように。

関連記事:

Reactを使って繰り返しレンダリングを防ぐ方法

vueを使ったグリッドレイアウト機能の実装方法

BootstrapのModalにドラッグ＆ドロップ機能を追加する方法の紹介

やり方JSで作成 プレビュー効果を実現するには

three.jsを使用してプロジェクトを作成します

以上がvuex を使用してメニュー管理を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。