Introduction

As JavaScript has grown to have a suite of libraries and frameworks built off it, these frameworks, too, have grown to birth their own libraries and dependencies. The community is very stratified and Vue JS is no exception, its Vuex has been heralded for handling state management really swiftly.

What is Vuex

Vuex is a state management library for VueJS web applications. It is a centralized store that can be used for all the components in an application. It has specific rules that makes sure that Vue state can be mutated in a predictable way. Vuex also integrates with Vue official dev tools extension for every browser to give you zero-config debugging and state snapshots.

Why use Vuex?

There are other state management libraries and stores that are supported by Vue JS. One of which is the very popular React state management library, Redux. Although Redux and Vuex are inspired by Flux, the state in Redux is immutable and so you have to entirely replace, Vuex has specific mutation rules.

Vue components get their state from the Vuex store and so can react to changes to store change. In this article, you will be taken through the changes that has taken place in Vuex since version 3.0.0

Vuex Version 3.0.0

This version of Vuex was released in the last quarter of 2017 and it comes with a breaking change for all TypeScript users. So from this version, the Vuex team made a TypeScript upgrade that makes the TypeScript no longer backward compatible.

• TypeScript type declarations have been updated to be compatible with Vue core 2.5+ and no longer work with 2.4 and below.
• All type declarations are now exported using ES-style exports, and must be imported using ES modules syntax:

The import statement looks like this:

import { Store } from ‘vuex’

Other fixes worked on includes:

• capability to use the state object of module instead of manually calling the function in the store constructor. This makes it possible not to call root state function twice anymore.
• store.watch() docs was fixed as the description of the watch() function is not accurate, getter receives two arguments.
• Make component name multi-word and use PascalCase and then added keys to v-for
• Capability to use this as Store in the handlers as the handlers for actions and mutations are bound to the store, but there is no type annotation for this behavior.

Vuex Version 3.0.1

This version was released in November of 2017 and it came with a lot of fixes and no breaking change. One of the main ones were addition of compile warnings for when the different namespaced modules has the same namespace also for when duplicate namespace for different namespaced modules.

Other fixes include:

• Making mutation payload optional in definition file because initially when testing a mutation without payload in TypeScript, it complains that about the missing payload, even though it’s not mandatory.
• Adding test cases for the new before/after action subscribers. Action subscribers are called before the action by default. This allows them to specify before and after subscribers where the after subscriber is called when the action resolves.
• Updating subscribeAction type declaration and add type tests, generalizing subscribeAction’s type declaration to accept both a function or an object and add type tests for that.
• Adding ability to turn off devtools on vuex by passing an off options.
• Swaping order of precedence so that we use the options devtools over the vues devtools
• Adding type annotation for the context of actions and mutations and removing this annotation from mutations.

Vuex Version 3.1.0

After a very long break, in January of 2019 the 3.1.0 version was released. With the feature that ensures store.subscribeAction can now specify whether the handler should be invoked before the action, after the action, or both.

Other fixes:

• Errors thrown inside action subscribers no longer cause the entire action to fail.
• Supporting jsdelivr NPM CDN like Vue package does
• Allowing Vuex usage in non-browser environments.
• Making mutation payload optional in definition file, initially when testing a mutation without payload in TypeScript, it complains that about the missing payload, even though it’s not mandatory.

Vuex Version 3.1.1

This is the latest version of Vuex, released in May of this year with some amazing features some of which are capabilities that allows inspecting vuex state in standalone devtools with non-browser environments such as NativeScript. This is a big deal as NativeScript-Vue is getting wide acceptance in the NativeScript community.

Other features include:

• New ES modules build for browser similar to the vue-router infrastructure.
• There was an improvement in the jsdelivr support. JsDelivr is arguably the fastes CDN in the market at the moment.
• Memory leak happening while using registerModule/unregisterModule was fixed
• Making mutation and action payload optional in definition file as fixes to typings.

You can check out these releases on GitHub here.

Updating your Vuex

It is an open source project and so if you find any issues, create a PR here. To update your Vuex version to the latest version, use the command below:

npm install — save — save-exact vuex@3.1.1

Conclusion

This post gives a little introduction to Vuex and why it is the best state management framework for Vue JS projects. It also discusses what is new in the recent versions of Vuex, happy hacking!

#vue-js #javascript #web-development