使用Vuex管理Vue.js應用程序的狀態有很多充分的理由。首先,使用Vuex插件添加超酷功能非常容易。Vuex社區的開發人員已經創建了大量免費插件供您使用,其中包含您可以想象的許多功能,以及一些您可能無法想象的功能。
下面展示使用Vuex插件輕松解決下一個項目的五個功能。
- 會話保持
- 同步標簽
- 語言本地化
- 管理多個加載狀態
- 緩存操作
會話保持
vuex-persistedstate使用瀏覽器的本地存儲來跨會話保持您的狀態。這意味著刷新頁面或關閉選項卡不會擦除您的數據。
一個很好的用例就是購物車:如果用戶意外關閉了一個標簽,他們可以在頁面狀態完好無損的情況下重新打開它。
同步標簽
vuex-shared-mutation在不同瀏覽器選項卡之間同步狀態。它通過將突變存儲到本地存儲來實現此目的。存儲事件會觸發所有其他選項卡/窗口中的更新,從而重放突變,從而保持狀態同步。
語言本地化
vuex-i18n允許您輕松地以多種語言存儲內容。在您的應用程序中切換語言是微不足道的。
一個很酷的功能是你可以用令牌存儲字符串,例如“Hello {name},這是你的Vue.js應用程序。”。您的所有翻譯都可以在字符串中需要相同的標記。
管理多個加載狀態
vuex-loading有助于管理應用程序中的多個加載狀態。此插件適用于狀態變化頻繁且復雜的實時應用程序。
緩存操作
vuex-cache可以緩存您的Vuex操作。例如,如果您從服務器檢索數據,則此插件將在您***次調用操作時緩存結果,然后在后續調度時返回緩存值。在必要時清除緩存是微不足道的。