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 vuex@3.1.1
// or via yarn
yarn add — exact vuex@3.1.1
Good studies!
Plug: LogRocket, a DVR for web apps
LogRocket 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.
The post What's new in Vuex 3.1.1 appeared first on LogRocket Blog.
Top comments (1)
Can any Vue project be upgraded to 3.1.1? Like is there any issues with the Vuejs core?
Thank you for the article btw, it raised issues I wasn't aware of as yet.