What’s new in Vuex 3.1.1
Tags: vue, vuex, javascript, electron
Published: 2019-07-08 20:07:07

---
title: What’s new in Vuex 3.1.1
published: true
tags: vuejs,vuex,javascript,electron
canonical_url: https://blog.logrocket.com/whats-new-in-vuex-3-1-1-d796b0c791bf
---

![](https://cdn-images-1.medium.com/max/1024/1*ZjKwrUuqSRS2OYFPf3gKHw.jpeg)

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](https://vuex.vuejs.org/) 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](https://nativescript-vue.org/) is a [NativeScript](https://www.nativescript.org/) 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](https://github.com/vuejs/vuex/releases/tag/v3.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](https://github.com/vuejs/vuex/releases/tag/v3.1.1) for more about each of these, as well as the PRs and contributor commits. Let’s take a closer look.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

### Support for debugging Vuex in NativeScript apps

[Vue-remote-devtools](https://github.com/vuejs/vue-devtools/tree/dev/shells/electron) (based in [Electron](https://electronjs.org/)) 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):

![](https://cdn-images-1.medium.com/max/818/0*vf16fSsavNGhks6N)<figcaption><em>Application example.</em></figcaption>

On the other side, [vue-devtools](https://github.com/vuejs/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](https://github.com/vuejs/vuex/pull/1404) with non-browser environments. If you’re not too familiar with Vuex state management, you can [read more about it here](https://vuex.vuejs.org/guide/state.html).

### New minifier and ES modules build for browser

Before the advent of [ES modules](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/), developers would commonly import JavaScript code into HTML pages like so:

```jsx
<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:

```jsx
<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](https://vuejsdevelopers.com/2019/02/04/vue-es-module-browser-build/).

Vuex, in turn, was facing the same issue, which is [fixed within version 3.1.1](https://github.com/vuejs/vuex/pull/1533). If you want to import Vuex directly into your browser, just use:

```jsx
<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](https://github.com/terser-js/terser). This is because UglifyJS, the previous minifier, is [no longer maintained](https://github.com/mishoo/UglifyJS2/issues/3156#issuecomment-392943058), 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](https://www.cdnperf.com/) than the majority of CDNs. [Now](https://github.com/vuejs/vuex/pull/1496), you can also [import Vuex from this CDN](https://cdn.jsdelivr.net/npm/vuex@3.1.1/dist/vuex.js).

### Memory leak fix while using registerModule/unregisterModule

[Modules](https://vuex.vuejs.org/guide/modules.html) 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](https://jsfiddle.net/mrj8spu0/) 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](https://github.com/vuejs/vuex/pull/1508) 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](https://github.com/vuejs/vuex/releases) 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](https://vuex.vuejs.org/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](https://github.com/vuejs/vuex/issues).

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

```jsx
npm install — save — save-exact vuex@3.1.1
// or via yarn
yarn add — exact vuex@3.1.1
```

Good studies!
* * *
### Plug: [LogRocket](https://logrocket.com/signup/), a DVR for web apps

[![](https://cdn-images-1.medium.com/max/1024/1*s_rMyo6NbrAsP-XtvBaXFg.png)](https://logrocket.com/signup/)<figcaption><a href="https://logrocket.com/signup/">https://logrocket.com/signup/</a></figcaption>

[LogRocket](https://logrocket.com/signup/) is a frontend logging tool that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

[Try it for free](https://logrocket.com/signup/).
* * *
The post [What's new in Vuex 3.1.1](https://blog.logrocket.com/whats-new-in-vuex-3-1-1-d796b0c791bf/) appeared first on [LogRocket Blog](https://blog.logrocket.com).