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:

export default {
  setCamps(state, camps) { state.camps = camps },
  setCurrentCamp(state, camp) { state.currentCamp = camp; },
  setBusy(state) { state.isBusy = true; },
  clearBusy(state) { state.isBusy = false; }
};

These are simple mutations, but I also needed to change some flags on objects. This is where it got confusing. When I did what I thought was obvious, it didn't reflect my changes (e.g. didn't react):

  setTalkApproved(state, talk, value) {
    talk.approved = value;
  }

Even though I wasn't setting the value using the state (only changing a value on the property of an object on the state, in this case inside a collection), it didn't work. It didn't work for a couple of reasons. First the value was always false (because nothing was passed for the 'value'). Secondly, Vuex wasn't aware what object I was changing.

Digging in I saw the error of my ways:

  setTalkApproved(state, {talk, value }) {
    talk.approved = value;
  },

The change is subtle, but by passing in an object that contained both the object to be changed and the value, Vuex knew to make the change in a stateful way. This can work for more than just two objects, but I wanted to share how I was able to change nested state. Hope it helps you when this happens to you.



Shawn
Shawn Wildermuth
Author, Teacher, and Coach




My Courses

Wilder Minds Training
Vue.js by Example
Bootstrap 4 by Example
Intro to Font Awesome 5 (Free Course)
Pluralsight
Designing RESTful Web APIs (new)
Building an API with ASP.NET Web API
Building an API with ASP.NET Core
Building a Web App with ASP.NET Core, MVC6, EF Core, Bootstrap and Angular
Less: Getting Started

Application Name WilderBlog Environment Name Production
Application Ver v4.0.30319 Runtime Framework x86
App Path D:\home\site\wwwroot\ Runtime Version .NET Core 3.0.0
Operating System Microsoft Windows 10.0.14393 Runtime Arch X86