What’s new in Vuex 3.1.1

JavaScript has become the mother language of a huge, diverse, and fast-growing programming universe. Once a framework or library gets updated, the community starts working in the side projects that have something related to it — and so it is with Vue.js and its surrounding projects.

Vuex earned a reputation for serving state management in an easy and straightforward way. However, it still follows the path of its famous parent, which means we’ll sometimes see delayed delivery for certain features in environments where the latest version of Vue.js is already in use.

For example, native mobile applications are spread out all the way around. Many JavaScript projects have correspondent libraries, frameworks, etc. to deal with app development.

Same with Vue: NativeScript-Vue is a NativeScript plugin that allows you to use Vue to craft your mobile application. Vuex can also be integrated with NativeScript-Vue for playing with the state machinery for your components, but it lacked a good debugging mechanism.

Version 3.1.1 of Vuex has arrived to attack this issue, among others. Along with support for debugging Vuex in NativeScript applications, the update offers other improvements like the inclusion of the jsDelivr CDN npm package, and fixes like memory leak for module registration. This version has no breaking changes, so you should feel secure in upgrading your projects.

You can read over the changelog for more about each of these, as well as the PRs and contributor commits. Let’s take a closer look.

Support for debugging Vuex in NativeScript apps

Vue-remote-devtools (based in Electron) is the official Vue devtools app for NativeScript app development with Vue.js. It is based on Node.js and Chromium and allows you to easily debug your HTML/CSS/JS application (in this case, Vue):

On the other side, vue-devtools, a browser extension for debugging web-based Vue applications, is well known for integrating seamlessly with Vuex — and its state management library — by allowing you to visualize the previous states and switching among them. This is great for what we call time-travel debugging (i.e., you can go back and forth between the states).

However, for NativeScript projects, that wasn’t possible until this version. Now, you can inspect Vuex state with non-browser environments. If you’re not too familiar with Vuex state management, you can read more about it here.

New minifier and ES modules build for browser

Before the advent of ES modules, developers would commonly import JavaScript code into HTML pages like so:

<script src="https://some-cdn.com/vue.js"></script>
<script>
  new Vue();
</script>

This classic method of importing JS libraries is now known for having downsides. The order of each import had to be correct; if the order is incorrect, scripts below one another wouldn’t find the dependencies. It also exposes objects and functions to the global namespace, so anyone can access and alter them. You can mistakenly import files twice — the list goes on.

Vue itself faced this problem. Until version 2.6, it didn’t have a step in its build process specifically for loading Vue modules in the browser. So, code like this wouldn’t work:

<script type=”module” src=”vue.esm.js”></script>

In the end, as of version 2.6 — and because everybody now uses ES modules in the browser — Vue is bundled with this build step. You can read more about how this works for Vue here.

Vuex, in turn, was facing the same issue, which is fixed within version 3.1.1. If you want to import Vuex directly into your browser, just use:

<script type=”module” src=”vuex.esm.browser.js”></script>
// Or below for the min version
<script type=”module” src=”vuex.esm.browser.min.js”></script>

Additionally, this version also includes a new minifier, Terser. This is because UglifyJS, the previous minifier, is no longer maintained, and it only supports ECMAScript 5, while Terser supports ES6+.

In practice, it does not change anything for you as a developer. On the other hand, because Terser is a fork of UglifyJS, it keeps support for API and CLI compatibility to uglify-es and uglify-js@3.

Support for jsDelivr

JsDelivr is reliably faster than the majority of CDNs. Now, you can also import Vuex from this CDN.

Memory leak fix while using registerModule / unregisterModule

Modules are a great way to divide our store into smaller and more controllable pieces, since the whole state is contained inside one big object in Vuex. In order to add or remove modules in the store, we simply need to call store.registerModule or store.unregisterModule, respectively.

However, controlling how the heap memory of the browser is managed in large applications can be a little tricky. There was a known issue with this that entailed an application adding hundreds of modules and unregistering them right after, which led to the heap memory not being cleared. You can imagine what happens next … memory leak.

The fix consists of simply garbage-collecting the oldVm instance inside the function resetStoreVM, which is responsible for restoring the vm after intense activity.

Conclusion

You can find the whole list of changes here to see for yourself what has been improved in Vuex not only in the latest version, but for the previous one. Or, if you’re looking to learn more about Vuex, consider a deep look at their official Getting Started guide.

The community is the key to success for any open source project — and you’re part of this as well. If you find anything wrong with the latest improvements, please go and report it.

If you haven’t yet upgraded to the latest version, the following command will get you going:

npm install — save — save-exact [email protected]
// or via yarn
yarn add — exact [email protected]

Good studies!

---