Stories
Tagged with Vuex
Vue 3: To Vuex or Not to Vuex
I've been digging into Vue 3 a lot lately. One topic that a lot of people seem to be discussing whether to use Vuex or not in Vue's Composition API (that is prominent in Vue 3).
After looking and prototyping some of these options, I wanted to share my opinions. In this post, I'll review different strategies (including Vuex) and talk about the pros and the cons of each.
I started out with a simple Vue app, fresh from the Vue CLI. It's using Vuex and the Router via Vue 3 (RC 9 at the time of writing of this post). You can find the project on Github if you want to play with it:
My Vuex Talk from Connect.Tech
I was delighted to spend some time today at Connect.Tech conference. Great web conference and it was packed. So many excited people who wanted to talk about web technologies!
I saw some great talks before mine. I tried to convince the audience that Vuex would simplify not complicate their Vue projects. Hopefully I succeeded.
As promised, I wanted to share my slide and code.
Changing Nested State in Vuex
I've been updating the Atlanta Code Camp website to improve our administration workflow. With the Call for Speakers coming up soon, I wanted to make sure we had a good way of picking only the best talks.
One of the things I've done is move it to a Single App with Vuex at the center of it. But I ran into an oddity with Vuex that I thought I'd share.
Much of the work I do in Vuex has to do with adding, updating and removing objects from the state. That works exactly the way I would expect. For example, I have a lot of mutations that looks like this:
Vuex and Asynchronicity
If you're using Vuex for state management in your Vue.js applications, there is a good chance that you need to use async operations (e.g. API calls). I have been doing this a while, but falling back to using Promises in most cases.
As I've been using async/await in C# for a while and wanted to try out async and await in JavaScript. In implementing the change, I thought I'd share how I did this in a simple Vue app.
To start out, I have a little demo project where I'm making some API calls directly in Vuex via actions:
Creating a Vuex Plugin
If you're building larger scale Vue objects and you're not using Vuex to centralize your state, please stop and go learn Vuex. Really.
For those of you still here, sometimes it's helpful to be able to monitor state changes to perform other tasks. For example, to send messages or communicate with servers that aren't about state (e.g. SignalR is a good example). That's where Vuex plugins come in.
A Vuex plugin is a simple function that is called once during the setup of a Vuex store. Typically you'd just create the function/arrow function taking an instance of the store:
export default store => {
};
Inside the function, you just want to subscribe to changes to the store as you need. An easy way to think about this is to use subscribe to a mutation:
export default store => {
store.subscribe((mutation, state) => {
if (mutation.type === "setError") {
// Alert someone
alert("Error occurred!");
}
});
};
The mutation that is passed in has a "type" and a "payload". With these properties of the mutation you can determine what to do. For example, the above example just pops up an alert (a really bad thing to do btw) when setError mutation is called. setError is a mutation in a store: