5 classic Vuex plug-ins in the Vue. JS project and vue. js classic vuex plug-ins

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 usesmutationSave the status to local storage. When the tab and window content are updated, the storage event is triggered and called again.mutationTo 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 ThendispatchDirectly return the cached value. It is also easy to clear the cache when necessary.