Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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.

Note: this article was originally posted here on the Vue.js Developers blog on 2017/09/11

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.

Image title

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.

Image title

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.

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.

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.

Image title

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

Get the latest Vue.js articles, tutorials, and cool projects in your inbox with the Vue.js Developers Newsletter.

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

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

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}