Five vuex plug-ins for your next vuejs project

original text ：5 Vuex Plugins For Your Next VueJS Project author ：Anthony Gore

Use Vuex To manage Vue The state of , There are many good reasons . One of them is , adopt Vuex Plug ins can easily extend some cool features .Vuex Developers in the community have created a large number of free plug-ins for you to use , There are many functions you can imagine , There are also features you may not have thought of .

In this paper , Will show you 5 A feature , You can go through Vuex Plug ins are easily added to the next project .

• State persistence
• Sync tab 、 window
• Language localization
• Manage multiple load states
• Cache operations

1. State persistence

vuex-persistedstate Use the browser's local storage （ local storage ） To state （ state ） persist . This means that refreshing the page or closing the tab will not delete your data .

A good example is the shopping cart ： If a user accidentally closes a tag , They can reopen and go back to the state of the previous page .

2. Sync tab 、 window

vuex-shared-mutations Status can be synchronized between different tabs . It passes through mutation Save state to local storage （local storage） To achieve . tab 、 When the content in the window is updated, the save event is triggered , Call again mutation , To keep the state synchronized .

3. Language localization

vuex-i18n Allows you to easily store content in multiple languages . Make it easier for your app to switch languages .

One cool feature is that you can store strings with tags , such as "Hello {name}, this is your Vue.js app.". All translations will use the same string where they are marked .

4. Manage multiple load states

vuex-loading Helps you manage multiple load states in your application . This plug-in is suitable for real-time applications with frequent and complex state changes .

5. Cache operations

vuex-cache Can be cached Vuex Of action. for example , If you retrieve data from the server , The plug-in will call this for the first time action Cache results when , And then after that dispatch in , Return the cached value directly . It's also easy to clear the cache if necessary .

Welcome to the comments below , Write down your favorite Vuex plug-in unit ！

Participation of this paper Tencent cloud media sharing plan , You are welcome to join us , share .