Vue.JS項(xiàng)目中5個(gè)經(jīng)典Vuex插件
使用 Vuex 來(lái)管理 Vue 的狀態(tài)，有很多好的理由。其中之一就是，通過(guò) Vuex 插件可以非常容易的擴(kuò)展一些很酷的功能。Vuex 社區(qū)中的開(kāi)發(fā)人員已經(jīng)創(chuàng)建了大量的免費(fèi)插件供你使用，有許多你能想象的功能，還有一些你可能沒(méi)有想到的功能。
狀態(tài)持久化同步標(biāo)簽頁(yè)、窗口語(yǔ)言本地化管理多個(gè)加載狀態(tài)緩存操作
1. 狀態(tài)持久化
vuex-persistedstate 使用瀏覽器的本地存儲(chǔ)（ local storage ）對(duì)狀態(tài)（ state ）進(jìn)行持久化。這意味著刷新頁(yè)面或關(guān)閉標(biāo)簽頁(yè)都不會(huì)刪除你的數(shù)據(jù)。
一個(gè)很好的例子就是購(gòu)物車：如果用戶不小心關(guān)閉了一個(gè)標(biāo)簽，他們可以重新打開(kāi)并回到之前頁(yè)面的狀態(tài)。
2. 同步標(biāo)簽頁(yè)、窗口
vuex-shared-mutations 可在不同的標(biāo)簽頁(yè)之間同步狀態(tài)。它通過(guò) mutation 將狀態(tài)儲(chǔ)存到本地存儲(chǔ)（local storage）來(lái)實(shí)現(xiàn)。選項(xiàng)卡、窗口中的內(nèi)容更新時(shí)觸發(fā)儲(chǔ)存事件，重新調(diào)用 mutation ，從而保持狀態(tài)同步。
3. 語(yǔ)言本地化
vuex-i18n 允許你輕松地用多種語(yǔ)言存儲(chǔ)內(nèi)容。讓你的應(yīng)用切換語(yǔ)言時(shí)更容易。
一個(gè)很酷的功能是你可以存儲(chǔ)帶有標(biāo)記的字符串，比如"Hello {name}, this is your Vue.js app."。所有的翻譯版本都會(huì)在標(biāo)記的地方使用相同的字符串。
4. 管理多個(gè)加載狀態(tài)
vuex-loading 有助于你管理應(yīng)用中的多個(gè)加載狀態(tài)。這個(gè)插件適用于狀態(tài)變化頻繁且復(fù)雜的實(shí)時(shí)應(yīng)用程序。
5. 緩存操作
vuex-cache 可以緩存 Vuex 的 action。例如，如果你從服務(wù)器檢索數(shù)據(jù)，這個(gè)插件將在第一次調(diào)用該 action 時(shí)緩存結(jié)果，然后在之后的dispatch中，直接返回緩存的值。必要時(shí)清除緩存也很簡(jiǎn)單。
相關(guān)文章
element?select必填項(xiàng)驗(yàn)證回顯問(wèn)題的解決
本文主要介紹了element?select必填項(xiàng)驗(yàn)證回顯問(wèn)題的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue3通過(guò)canvas實(shí)現(xiàn)圖片圈選功能
這篇文章將給大家詳細(xì)介紹了vue3如何通過(guò)canvas實(shí)現(xiàn)圖片圈選功能,文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴快來(lái)跟隨小編一起學(xué)習(xí)一下吧2023-12-12
這篇文章主要給大家介紹了關(guān)于Vue組件傳參11種方式的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了ant?design?vue的form表單取值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
在Vue中實(shí)現(xiàn)不刷新的iframe頁(yè)面的方案
在Vue項(xiàng)目中,我們可能會(huì)遇到這樣的需求：需要在應(yīng)用中嵌入iframe頁(yè)面,并且要求在路由切換的過(guò)程中,iframe的內(nèi)容不會(huì)被刷新,本文將介紹如何解決這個(gè)問(wèn)題,并給出具體的實(shí)現(xiàn)方案,需要的朋友可以參考下2025-01-01
vue使用directive限制表單輸入整數(shù)、小數(shù)的方法
這篇文章主要介紹了vue使用directive限制表單輸入整數(shù)，小數(shù),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue3的setup的使用和原理,結(jié)合實(shí)例形式詳細(xì)分析了vue3 setup的基本功能、原理與使用方法,需要的朋友可以參考下2023-06-06
vue.config.js配置報(bào)錯(cuò)解決辦法(可能是與webpack混淆)
在Vue.js開(kāi)發(fā)過(guò)程中,vue.config.js文件是用于配置項(xiàng)目的,特別是對(duì)于開(kāi)發(fā)環(huán)境的設(shè)置,這篇文章主要給大家介紹了關(guān)于vue.config.js配置報(bào)錯(cuò)解決的相關(guān)資料,可能是與webpack混淆,需要的朋友可以參考下2024-06-06
vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決
這篇文章主要介紹了vue中動(dòng)態(tài)渲染數(shù)據(jù)時(shí)使用$refs無(wú)效的解決方案，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了用Vue.js遞歸組件構(gòu)建一個(gè)可折疊的樹(shù)形菜單的教學(xué)內(nèi)容，有興趣的朋友跟著學(xué)習(xí)下。2017-12-12