Refactoring Vuex with Map Helpers and Modules
Learn how map helpers and modules can make your Vuex code more organized, scalable and readable
Find the stories you need
Learn how map helpers and modules can make your Vuex code more organized, scalable and readable
The Vuex team is now ready to present you their vision of the upcoming v5 of Vuex – the official Vue state management library. The first RFC covers the new architecture as well as differences compared to Vuex 3 & 4. Check it out and join the discussion!
By using the reactivity system and the dependency injection mechanism of Vue 3, we've gone from a local state to centralized state management that can replace Vuex in smaller applications.
The Composition API (and other Vue 3 APIs) simplifies a lot when it comes to state management. Learn how the Composition API has changed the way I manage my application state.
What if you wanted to manage state, but you didn't want to use Vuex? Don't get me wrong, Vuex is a great tool. But it's not ideal for every use case.
New release that introduces the hasModule method to check if a module has already been registered.
Explore the many approaches to state management with Vue.js in this deep dive article by Filip Rakowski.
Yet another tutorial by Raymond Camden. And a ToDo app. Haven’t we had enough of those? Maybe, but this one comes with a nice twist – it shows how to nicely integrate IndexedDB with Vuex and this alone makes it a worthwhile read!
Such an interesting article! Have you thought about moving parts of your Vuex store to a web worker and thus off the main thread? This could improve the overall performance of your application, especially if you execute some expensive, blocking tasks in your store. Check out the difference between the demo pages in the article.
Here’s the 2nd part of the series focused on building reusable factories for Vuex store modules to reduce repeatable code. In this part, Markus shows how you can create a "feature" module factory that helps you consume the data stored by the "model" modules. Interesting read!
Looking for a way to reduce some Vuex boilerplate for repeatable functionalities? Standardize how you manage data in your app? Markus has some pretty nice ideas on that and more! Check it out.
The term CRUD stands for "create, read, update and delete" and is usually used to describe actions you can perform on a persistence layer like Vuex. This often ends up with a lot of repetitive code where the only variable is the resource it manages. In this article, Markus shows how you can use dynamic Vuex modules and a JSON schema to generate a fully functioning CRUD.
Markus is back with another advanced article. This time about decoupling your components from the Vuex store by introducing an additional layer of abstraction – providers. Before you jump on the idea though, make sure to read the wrap up at the end of the article.
Here’s an interesting idea. Once you normalize your store, you will see that certain operations inside of it will be quite repeatable, often resembling the typical CRUD operations known from backend frameworks. Knowing that, Markus shows how you can build a Vuex module factory to easily create new modules for your data.
Working with a deeply nested Vuex state can be quite problematic (especially when you try to update it without mutating it, since deeply nested objects and arrays are also passed by reference). To solve this and other possible problems, Markus is proposing to normalize your Vuex state by keeping your state "flat" and only pointing to specific objects with special keys like id.
Here’s a very short and simple graphical explanation to how the data flow in Vuex works. If you had some troubles understanding Vuex or know someone who has, this should definitely help shine some light on it.
Method-style getters are getters that return a function which you can call to get some specific resources out of your Vuex store. Here’s an example in the Vuex docs. However, the result of that function won’t be cached. But what if that could be changed? Read this article by Michael Gallagher to see how that’s possible.
Here’s a pretty good on how to build a custom i18n (translations) system for your Vue app that is based on Vuex. It covers how to fetch the translations, use them in your app, persist them in localStorage and then invalidate the local cache whenever it’s needed.
If you have been meaning to learn about Vuex, YouTube user RakibTG has created a free crash course that goes over the basics of Vuex as well as namespaced modules.
Last week we covered the 1st part of implementing the Building Pattern in Vue. Here’s the 2nd part, where Markus Oberlehner shows you how you can use it to build a dynamic form builder out of it. With validations! If you have numerous forms in your app that beg for a refactor – this is a must read.
Michael Gallagher breaks down the distinctions between mutations and actions in a detailed article.
If you come from a backend background you probably heard of database ORMs. Since Vuex can be somewhat treated as a local database, no wonder there is a Vuex-ORM library. By using it, you’re moving away from the default, string-based API in favor of models that represent the data and come with their own API.
So you probably already know that you should store shared data in Vuex, but how to do it in a way that actually makes it easier to work with the data? Greg Bate shares some of his ideas on how to structure Vuex to make it extremely easy to find and access specific records. Interesting read.
A brand new release of Vuex that comes with support for debugging NativeScript apps with the standalone Vue Devtools as well as a new ES module build.
Here’s a pretty useful trick on how to make it easier to work with forms that use data from Vuex. Since you don’t want to mutate the form directly, you have to go through mutations. But having a mutation for every input out there in the form – probably not the way to go. Read the article to see how it can be solved. My small suggestion would be to pass the property name into the event handler rather than keeping it inside the ID attribute.
Do you remember the Tamagotchi? The portable-pet-device where your pet gets hungry over time and you have to play with it? Here, Raymond Camden explains how to work with Vuex to build a similar kind of application, where you have to take care of a cat, that gets periodically more hungry and less happy, unless you do something about it.
Here’s an interesting story on the experience you can achieve when using vuex-typescript. If you’re into TypeScript, you might want to read this one.
Now this is huge! Haven’t seen such a long and detailed tutorial in a while. Thought about building a music app powered by Spotify? Check out this article by Cher Scarlett, who walks you through the whole setup including server configuration and the Nuxt app. Amazing write-up.
A short tutorial on how to use watch and subscribeAction methods of Vuex in order to handle side effects, integrate external code and extend your store in Vue.js applications
Looking for a complete tutorial on how to build a Vue SPA that also utilizes Vuex, Vuetify and Firebase? Check out this article by Jennifer Bland.
Do you know that Vuex also has a watch-like functionality? Or that you can also subscribe and react to different mutations being committed? Well, now you do. Read this article by Vinicius Kiatkoski to learn how you can apply this knowledge.
Vuex is a library that tends to be quite daunting for people that had no previous experience with the a flux-like pattern. In this article Adam Jahr from Vue Mastery explains how Vuex works with 200+ animations.
Redux is to React what Vuex is to Vue, right? Did you know, however, that you can use Redux with Vue just fine? Because sure you can! In this article, Jean-Sebastien Tremblay will explain the what, the why, and the how.
A very promising start to a series about building large-scale Vue applications. The first part focuses on managing and modularising the Vuex store. Stephane Souron shares his experience on the topic along with some recommendations like ditching the use of Vuex helpers like mapActions.
Ido Shamun wrote a great introduction to the concept of offline-first applications. The article covers the definition of optimistic updates, shows how to create an offline cache of the Vuex state and how to sync it up with your server once the connection is restored.
Gregg Pollack wrote a great, illustrated introduction to Vuex – Vue’s state management library. If you still haven’t learned how and when to use it – this might be the perfect article to start with.
This one reminds me of a workshop Evan You has given last year at VueConf EU. In this brilliant (and funny) article, Adrià Fontcuberta shows how you can build your own version of Vuex. Spoiler Alert To some degree, Vuex is just an additional abstraction layer on top of a Vue instance.
Slides from the recent talk at Vue.js Summit conference about testing.
Have been using the great vue-enterprise-boilerplate by Chris Fritz? If yes you might have noticed that Vuex modules are automatically registered whenever you create a new module file. However, those require for the state, actions, mutations and getters to be in one file. If you would like to split those into separate files, you might want to read this short article by Thomas Findlay that explains how to do just that.
A Vuex plugin that easily maps Rails resources to Vuex modules
Besides the basics, Vuex provides some additional features that can be especially useful inside larger applications. Here, Arik Liber gives a nice introduction to the less known features of Vuex like Namespaces and dynamic modules.
We exist to provide Vue developers with the latest news and tutorials to stay up-to-date with their technology.