本篇文章主要介紹了詳解使用vuex進行選單管理,現在分享給大家,也給大家做個參考。
vuex 的優勢在複雜狀態管理中才能提現出來。
如果專案中有多級選單,且不同元件中散佈多個相同等級的選單,專案同一時刻各級選單有且僅有一個高亮,選單跳轉時除了路由改變,對應選單也要高亮(之前的恢復非高亮狀態),這便是個使用vuex 再好不過的場景。
使用DOM 操作進行簡單選單管理
使用DOM 進行選單管理,背後的想法是:在點擊選單的同時,將事件物件傳入事件處理程序,想讓目前高亮的menu 非高亮,再讓點擊的menu 高亮。
<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}`); },
這樣雖然實現了點擊切換時menu 高亮,但有一個bug:每次初始化都會使預設的menu 變成高亮,如果此時在非預設高亮的menu 中用戶手動刷新頁面,會導致menu 高亮錯誤(例如在buylist 頁面刷新頁面後,頁面內容依然停留在buylist,但高亮的菜單卻變成了userlist)。
如果要解決這個bug,就需要在本地儲存(刷新不改變儲存狀態) menu 狀態,本地儲存可以選擇不同的方案,在此不做討論,但可以肯定的是DOM 本地儲存控制menu 高亮的方案在專案逐漸變大以後會變得難以維護。
現在是 vuex 登場的時候了。
使用vuex 進行選單管理
使用vuex 進行選單管理需要在開發前就規劃好選單的層級
,以便在vuex 中分配state
和mutations
。
規劃層級
確定專案中哪些是一級選單,哪些是二級選單,以此類推… 這裡要注意的是,為簡化操作,同等級選單都以不同名稱命名,這樣在vuex 中就不需要專注在選單屬於那個頁面,只專注在狀態就好。選單層級通常如下:
|-root | | | |-first-menu1 | | |- second-menu1 | | |- second-menu2 | | |- second-menu3 | | | |-first-menu2 | |- second-menu3 | |- second-menu4 | |- second-menu5
在vuex 指派`state` 和`mutations`
不同層級的選單分別佔用一個`state`,至於`mutations`,本例不同`state` 分別對應寫了一個`mutations`,實際工作中為了更大成都減少程式碼復用,對於menu 的狀態管理可以只寫一個`mutations`,透過傳參判斷是更改哪個層級及對應的menu。
要注意的是 vuex 在頁面刷新後狀態會重新初始化,這顯然和管理選單所需功能不符(除了主動觸發,其他操作不能對選單產生影響)。可以透過vuex-persistedstate 改變vuex 預設生命週期,下面範例程式碼將vuex 狀態儲存在了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; } }, });
元件中渲染
在template 動態載入高亮class,透過vuex 中state 控制:
<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>
寫js 時有個技巧:路由path 和對應高亮的menu 名稱最好相同,因為路由跳轉和高亮menu 直接相關,這樣可以減少一個參數:
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(); },
其他
#對於vuex 的最佳化
上文有談到,實際工作中為了更大程度實現程式碼重複使用,對於某個類別的狀態管理可以只寫一個mutations ,透過傳參(Payload )判斷更改內容。還是以menu 管理為例,可進行下面的最佳化:
vuex 最佳化後如下:
const store = new Vuex.Store({ // 其他代码略 mutations: { // 优化后代码,合并 changeFirstActiveMenu 和 changeSecondActiveMenu changeActiveMenu (state, menuInfo) { state[menuInfo.menuHierarchy] = menuInfo.name; } } });
元件js 部分最佳化後如下:
methods: { menuClicked(path) { // 其他代码略高亮 // 优化后代码:更改一级和二级菜单触发同个 mutation this.$store.commit("changeActiveMenu", { menuHierarchy: 'activeFirstMenu', name: path, }); this.$store.commit("changeActiveMenu", { menuHierarchy: 'activeSecondMenu', name: path, }); // 其他代码略 }, },
上面是我整理給大家的,希望今後對大家有幫助。
相關文章:
以上是如何使用vuex實現選單管理的詳細內容。更多資訊請關注PHP中文網其他相關文章!

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制:1.通過Node.js實現服務器端編程,適用於高並發請求處理。 2.通過ReactNative進行移動應用開發,支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制,適用於硬件交互。

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

AI Hentai Generator
免費產生 AI 無盡。

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

記事本++7.3.1
好用且免費的程式碼編輯器

EditPlus 中文破解版
體積小,語法高亮,不支援程式碼提示功能

SublimeText3漢化版
中文版,非常好用

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器