この記事では主にvuexを使ったメニュー管理の詳細な説明を紹介しますので、参考にしてください。
vuex の利点は、複雑な状態管理でのみ実現できます。
プロジェクトに複数のレベルのメニューがあり、同じレベルの複数のメニューが異なるコンポーネントに分散している場合、メニューがジャンプすると、プロジェクト内で同時にメニューの各レベルのハイライトは 1 つだけになります。 、ルーティングの変更に加えて、対応するメニューも強調表示する必要があります (以前の非強調表示状態への復元)。これは vuex を使用するための完璧なシナリオです。
シンプルなメニュー管理に DOM 操作を使用する
メニュー管理に DOM を使用する その背後にあるアイデアは、メニューをクリックするときにイベント オブジェクトをイベント ハンドラーに渡し、現在ハイライトされているメニューをハイライト解除することです。クリックしたメニューを強調表示します。
<p class="menu-url"> <span class="active userList" @click="menuClicked($event, 'userList')">注册</span> <span class="chargeList" @click="menuClicked($event, 'chargeList')">充值</span> <span class="buyList" @click="menuClicked($event, 'buyList')">购买</span> <span class="bangList" @click="menuClicked($event, 'bangList')">到期</span> <span class="withDrawList" @click="menuClicked($event, 'withDrawList')">提现</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('secondMenu1')">secondMenu1</span> </p> <p class="subMenu"> <span :class="{ activeSecondMenu: activeMenu.secondMenu2 }" @click="menuClicked('secondMenu2')">secondMenu2</span> </p> <p class="subMenu"> <span :class="{ activeSecondMenu: activeMenu.secondMenu3 }" @click="menuClicked('secondMenu3')">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 部分は次のように最適化されます: 関連記事: BootstrapのModalにドラッグ&ドロップ機能を追加する方法の紹介 以上がvuex を使用してメニュー管理を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。const store = new Vuex.Store({
// 其他代码略
mutations: {
// 优化后代码,合并 changeFirstActiveMenu 和 changeSecondActiveMenu
changeActiveMenu (state, menuInfo) {
state[menuInfo.menuHierarchy] = menuInfo.name;
}
}
});