5 Vuex Plugins For Your Next VueJS Project

There are many good reasons to use Vuex to manage Vue state. One of them is that it is very easy to extend some cool features through Vuex plug-ins. The developers in the Vuex community have created a number of free plug-ins for you to use, with many features you can imagine and others you might not have thought of.

In this article, I’ll show you five features that you can easily add to your next project via the Vuex plug-in.

  • State persistence
  • Synchronize tabs and Windows
  • Language localization
  • Manage multiple load states
  • Caching operations

1. State persistence

Vuex-persistedstate Uses the local storage of the browser to persist the state. This means that refreshing the page or closing the TAB will not delete your data.

A good example is shopping carts: if a user accidentally closes a TAB, they can reopen it and return to the previous page.

2. Synchronize tabs and Windows

Vuex-shared-mutations synchronise status across different tabs. It implements mutation by storing the state to the local storage. The save event is triggered when the content in the TAB, window is updated, and mutation is called again to keep the state in sync.

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 use the same string at the markup.

4. Manage multiple load states

Vuex-loading helps you manage multiple loading states in your application. This plug-in is suitable for complex real-time applications with frequent state changes.

5. Cache operations

Vuex-cache Can cache vuex actions. For example, if you retrieve data from the server, the plug-in will cache the result the first time the action is called, and then return the cached value directly at subsequent Dispatches. It is also easy to clear the cache if necessary.

Feel free to post your favorite Vuex plugin in the comments below!