Manipulating deeply nested state data in Vuex actions can be a challenge

Question

Manipulating deeply nested state data in Vuex actions can be a challenge

When working in the store, I have an action that updates certain data. The action is structured like this:


setRoomImage({ state }, { room, index, subIndex, image }) {
      state.fullReport.rooms[room].items[index].items[subIndex].image = image;
      console.log(state.fullReport.rooms[room].items[index].items[subIndex])
    },

Since the data is dynamic, I cannot hard code the properties and need to dynamically change nested values. Here's how the data appears:

fullreport: {
    rooms: {
        abc: {
          items: [
            {
              type: "image-only",
              items: [
                {
                  label: "Main Image 1",
                  image: ""
                },
                {
                  label: "Main Image 2",
                  image: ""
                }
              ]
            }
          ]
        }
      }
}

After dispatching the action, although I see successful mutation of the sub-property image in the console, the value doesn't change when accessing the VueX store from the Vue DevTools within Chrome. This is what the console displays:

https://i.stack.imgur.com/z2Smr.png

I'm wondering why this is happening. Even though the data is visibly changing, the state isn't reflecting it, leading to no rerendering of components.

I attempted using Vue.set instead of a simple assignment, but had no success :(

Vue.set(
  state.fullReport.rooms[room].items[index].items[subIndex],
  "image",
   image
 );

Edit:

In response to suggestions by David Gard, I tried the following:

Additionally, I rely on Lodash _ (I understand duplicating entire objects isn't ideal), here is the updated mutation code block.

let fullReportCopy = _.cloneDeep(state.fullReport);
fullReportCopy.rooms[room].items[index].items[subIndex].image = image;
Vue.set(state, "fullReport", fullReportCopy);

Within the computed property where state.fullReport serves as a dependency, I added a console.log which outputs a string each time the computed property is recomputed.

Upon committing this mutation, I observe the computed property logging the string every time, but the received state remains unchanged. It seems that Vue.set merely indicates to the computed property that the state has been altered without actually implementing the change. Consequently, there are no visible alterations in my component's user interface.

javascript vue.js vuex

Answer 1

Answer №1

Dealing with complex nested state in Vuex

Managing deeply nested state in Vuex can quickly become a challenge, especially when it comes to handling Arrays and Objects differently. One limitation of Vuex is the lack of support for reactive Maps.

In my experience, I've encountered projects that require dynamic property setting with multiple levels of nesting. One approach that has worked for me is recursively setting each property.

Here's a functional but not elegant solution:

function createReactiveNestedObject(rootProp, object) {
  let root = rootProp;
  const isArray = root instanceof Array;

  Object.keys(object).forEach((key, i) => {
    if (object[key] instanceof Array) {
      createReactiveArray(isArray, root, key, object[key])
    } else if (object[key] instanceof Object) {
      createReactiveObject(isArray, root, key, object[key]);
    } else {
      setValue(isArray, root, key, object[key])
    }
  })
}

function createReactiveArray(isArray, root, key, values) {
  if (isArray) {
    root.push([]);
  } else {
    Vue.set(root, key, []);
  }
  fillArray(root[key], values)
}

function fillArray(rootArray, arrayElements) {
  arrayElements.forEach((element, i) => {
    if (element instanceof Array) {
      rootArray.push([])
    } else if (element instanceof Object) {
      rootArray.push({});
    } else {
      rootArray.push(element);
    }
    createReactiveNestedFilterObject(rootArray[i], element);
  })
}

function createReactiveObject(isArray, obj, key, values) {
  if (isArray) {
    obj.push({});
  } else {
    Vue.set(obj, key, {});
  }
  createReactiveNestedFilterObject(obj[key], values);
}

function setValue(isArray, obj, key, value) {
  if (isArray) {
    obj.push(value);
  } else {
    Vue.set(obj, key, value);
  }
}

If you have a more efficient way to handle this scenario, I'd love to hear about it!

Edit:

Here's how I implement the above solution in my Vuex store:

// in store/actions.js

export const actions = {
  ...
  async prepareReactiveObject({ commit }, rawObject) {
    commit('CREATE_REACTIVE_OBJECT', rawObject);
  },
  ...
}

// in store/mutations.js
import { helper } from './helpers';

export const mutations = {
  ...
  CREATE_REACTIVE_OBJECT(state, rawObject) {
    helper.createReactiveNestedObject(state.rootProperty, rawObject);
  },
  ...
}

// in store/helper.js

// include the functions mentioned above

export const helper = {
  createReactiveNestedObject
}

Answer 2

Dealing with complex nested state in Vuex

Managing deeply nested state in Vuex can quickly become a challenge, especially when it comes to handling Arrays and Objects differently. One limitation of Vuex is the lack of support for reactive Maps.

In my experience, I've encountered projects that require dynamic property setting with multiple levels of nesting. One approach that has worked for me is recursively setting each property.

Here's a functional but not elegant solution:

function createReactiveNestedObject(rootProp, object) {
  let root = rootProp;
  const isArray = root instanceof Array;

  Object.keys(object).forEach((key, i) => {
    if (object[key] instanceof Array) {
      createReactiveArray(isArray, root, key, object[key])
    } else if (object[key] instanceof Object) {
      createReactiveObject(isArray, root, key, object[key]);
    } else {
      setValue(isArray, root, key, object[key])
    }
  })
}

function createReactiveArray(isArray, root, key, values) {
  if (isArray) {
    root.push([]);
  } else {
    Vue.set(root, key, []);
  }
  fillArray(root[key], values)
}

function fillArray(rootArray, arrayElements) {
  arrayElements.forEach((element, i) => {
    if (element instanceof Array) {
      rootArray.push([])
    } else if (element instanceof Object) {
      rootArray.push({});
    } else {
      rootArray.push(element);
    }
    createReactiveNestedFilterObject(rootArray[i], element);
  })
}

function createReactiveObject(isArray, obj, key, values) {
  if (isArray) {
    obj.push({});
  } else {
    Vue.set(obj, key, {});
  }
  createReactiveNestedFilterObject(obj[key], values);
}

function setValue(isArray, obj, key, value) {
  if (isArray) {
    obj.push(value);
  } else {
    Vue.set(obj, key, value);
  }
}

If you have a more efficient way to handle this scenario, I'd love to hear about it!

Edit:

Here's how I implement the above solution in my Vuex store:

// in store/actions.js

export const actions = {
  ...
  async prepareReactiveObject({ commit }, rawObject) {
    commit('CREATE_REACTIVE_OBJECT', rawObject);
  },
  ...
}

// in store/mutations.js
import { helper } from './helpers';

export const mutations = {
  ...
  CREATE_REACTIVE_OBJECT(state, rawObject) {
    helper.createReactiveNestedObject(state.rootProperty, rawObject);
  },
  ...
}

// in store/helper.js

// include the functions mentioned above

export const helper = {
  createReactiveNestedObject
}

Answer 3

Answer №2

Leaving out the recommended practices from the comments.

All you have to do is instruct Vue when the object changes (Complex objects are not reactive). Utilize Vue.set. You must set the entire object:

   Vue.set(
     state,
     "fullReport",
     state.fullReport
   );

For more information, visit the documentation: https://v2.vuejs.org/v2/api/#Vue-set

Answer 4

Leaving out the recommended practices from the comments.

All you have to do is instruct Vue when the object changes (Complex objects are not reactive). Utilize Vue.set. You must set the entire object:

   Vue.set(
     state,
     "fullReport",
     state.fullReport
   );

For more information, visit the documentation: https://v2.vuejs.org/v2/api/#Vue-set

Manipulating deeply nested state data in Vuex actions can be a challenge

Edit:

Answer №1

Dealing with complex nested state in Vuex

Here's a functional but not elegant solution:

If you have a more efficient way to handle this scenario, I'd love to hear about it!

Edit:

Answer №2

Similar questions

Step-by-step guide on populating input fields with JSON data for each row

Rotate a sphere in three.js in order to align the mapped image of the globe with the GeoJSON data that is displayed in the same three

Whenever I try to retrieve data from MongoDB using Node.js, I consistently encounter a timeout error

Center the image within the div by setting its position to absolute

Struggling to figure out how to make vue-router function properly

User form not triggering post requests

Troubleshooting: Problems with AngularJS $http.get functionality not functioning as expected

Steps for aligning an image to the right using Bootstrap Vue

Experiencing difficulties with mocha and expect while using Node.js for error handling

Issue with making a call to retrieve an image from a different directory in ReactJS

Struggling to retrieve data from Firebase in React Native?

Unusual actions when making a $.ajax call using the PUT method

Is it possible to have both Node.js and browser code in the same file using webpack, while ensuring that only the browser code is accessible and the Node.js code remains hidden?

Check domains using Jquery, AJAX, and PHP

Accessing the first child node in JsTree

observing the value of the parent controller from the UI router state's resolve function

Automatically resizing font to fit the space available

Error: The callback specified is not a valid function

Translating SQL to Sequelize Syntax

Concentrating on a Div Element in React