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.
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.
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
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.
The import statement looks like this:
import { Store } from ‘vuex’
Other fixes worked on includes:
watch()
function is not accurate, getter receives two arguments.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.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:
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:
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:
You can check out these releases on GitHub here.
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
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
Discover new features you may have missed in Vuex 3