5 Vuex Plugins for Your Next Vue.js Project

DZone 's Guide to

5 Vuex Plugins for Your Next Vue.js Project

In this article, we go over five plugins for Vue.js that web developers can use for tasks such as persisting state, caching actions, and more!

· Web Dev Zone ·
Free Resource

There are a lot of good reasons to use Vuex to manage the state of your Vue.js app. For one, it's really easy to add super-cool features with a Vuex plugin. Developers in the Vuex community have created a ton of free plugins for you to use, with many of the features you can imagine, and some you may not have imagined.

In this article, I will show you five features that you can easily add to your next project with a Vuex plugin.

  1. Persisting state.
  2. Syncing tabs/windows.
  3. Language localization.
  4. Managing multiple loading states.
  5. Caching actions.

1. Persisting State

vuex-persistedstate uses the browser's local storage to persist your state across sessions. This means that refreshing the page or closing a tab won't wipe your data.

A good use case for this would be a shopping cart: if the user accidentally closes a tab, they can reopen it with the page state intact.

Dynamically adding name

Dynamically adding name

You may also like: Dependency Mocks: A Secret Weapon for Vue Unit Tests.

2. Syncing Tabs/Windows

vuex-shared-mutations synchronizes state between different browser tabs. It does this by storing a mutation to local storage. The storage event triggers an update in all other tabs/windows, which replays the mutation, thus keeping state in sync.

Dynamically adding name

Dynamically adding name

3. Language Localization

vuex-i18n allows you to easily store content in multiple languages. It is then trivial to switch languages in your app.

One cool feature is that you can store strings with tokens, e.g. "Hello {name}, this is your Vue.js app." All your translations can have the same token where it's needed in the string.

Toggling language in app

Toggling language in app

4. Managing Multiple Loading States

vuex-loading helps to manage multiple loading states in your application. This plugin is handy for real-time apps where changes in state are frequent and complex.

Toggling letters in app

Toggling letters in app

5. Caching Actions

vuex-cache can cache your Vuex actions. For example, if you're retrieving data from a server, this plugin will cache the result the first time you call the action, then return the cached value on subsequent dispatches. It's trivial to clear the cache when necessary.

Fetching name from server

Fetching name from server

I'd love to hear your favorite Vuex plugins in the comments below!

Further Reading

javascript, plug-ins, vue, vue.js, web dev

Published at DZone with permission of Anthony Gore , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}