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 tonne 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 feature that you can easily add to your next project with a Vuex plugin.
- Persisting state
- Syncing tabs/windows
- Language localization
- Managing multiple loading states
- 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.
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.