5 classic Vuex plug-ins in the Vue. JS project and vue. js classic vuex plug-ins
There are many good reasons to use Vuex to manage the status of Vue. One of them is that the Vuex plug-in can easily expand some cool functions. Developers in the Vuex community have created a large number of free plug-ins for you to use. There are many functions you can imagine and some functions you may not think.
State persistence synchronization tab, window language localization management multiple loading state cache operations
1. State persistence
Vuex-persistedstate uses the local storage of the browser to persist the state. This means that data will not be deleted when you refresh the page or close the tab.
A good example is shopping cart: If users accidentally close a tag, they can re-open it and return to the previous page status.
2. Synchronize tabs and windows
Vuex-shared-mutations can be synchronized between different tabs. It usesmutation
Save the status to local storage. When the tab and window content are updated, the storage event is triggered and called again.mutation
To maintain state synchronization.
3. Language Localization
Vuex-i18n allows you to easily store content in multiple languages. It makes it easier for your applications to switch languages.
A cool feature is that you can store tagged strings, such"Hello {name}, this is your Vue.js app."
. All translation versions use the same string in the mark.
4. manage multiple loading statuses
Vuex-loading helps you manage multiple loading statuses in an application. This plug-in is suitable for real-time applications with frequent and complex state changes.
5. cache operations
Vuex-cache can cache Vuexaction
. For example, if you retrieve data from the server, this plug-in will call action
Thendispatch
Directly return the cached value. It is also easy to clear the cache when necessary.