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.
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
<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 [email protected]
Support for jsDelivr
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
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Learn how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Compare NestJS vs. Express.js
- Discover popular ORMs used in the TypeScript landscape
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.
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]
Experience your Vue apps exactly how a user doesDebugging Vue.js applications can be difficult, especially when there are dozens, if not hundreds of mutations during a user session. If you’re interested in monitoring and tracking Vue mutations for all of your users in production, try LogRocket. https://logrocket.com/signup/
The LogRocket Vuex plugin logs Vuex mutations to the LogRocket console, giving you context around what led to an error, and what state the application was in when an issue occurred.
Modernize how you debug your Vue apps - Start monitoring for free.