When employing vue.set within Vuex, it seems that the state is not getting properly updated

Question

When employing vue.set within Vuex, it seems that the state is not getting properly updated

Today, I encountered an issue while trying to add an object into a nested array. Despite successfully using similar code for other states, it does not seem to be working this time around.

I can't help but wonder if the problem lies in the fact that it is a nested array?

Here is the snippet of code I am currently using:

Vue.set(state.sections[getCurrentSection(state).index].rows[getCurrentRow(state).index].columns[getCurrentColumn(state).index].elements, 0, element)

Below is the structure of the element object being used:

var element = {
    id: id,
    style: {
        backgroundColor: {
            value: 'rgba(255,255,255,1)',
        },
    },
}

What could possibly be going wrong here?

vue.js vuex

Answer 1

Answer №1

UPDATE

Here is an alternative method for cloning:

function hasProp(arg1, arg2) {
  return Object.prototype.hasOwnProperty.call(arg1, arg2);
}

function extend(arg1, arg2) {
  const keys = Object.keys(arg2);
  const len = keys.length;

  let i = 0;

  while (i < len) {
    arg1[keys[i]] = arg2[keys[i]];
    i += 1;
  }

  if (hasProp(arg2, 'toString')) {
    arg1.toString = arg2.toString;
  }

  if (hasProp(arg2, 'valueOf')) {
    arg1.valueOf = arg2.valueOf;
  }

  return arg1;
}

const obj1 = {
  a: 1,
  b: 2,
  c: { a: 1, b: 2}
};

const cloned = extend({}, obj1);
cloned.a = 9999;

console.log(obj1, cloned);

To create a deep copy of your state.sections:
Generate a new object and apply the necessary modifications;

Swap out state.sections with the new object -

state.sections = Object.assign({}, newObject)

.

Your state and view will be updated accordingly.

Answer 2

UPDATE

Here is an alternative method for cloning:

function hasProp(arg1, arg2) {
  return Object.prototype.hasOwnProperty.call(arg1, arg2);
}

function extend(arg1, arg2) {
  const keys = Object.keys(arg2);
  const len = keys.length;

  let i = 0;

  while (i < len) {
    arg1[keys[i]] = arg2[keys[i]];
    i += 1;
  }

  if (hasProp(arg2, 'toString')) {
    arg1.toString = arg2.toString;
  }

  if (hasProp(arg2, 'valueOf')) {
    arg1.valueOf = arg2.valueOf;
  }

  return arg1;
}

const obj1 = {
  a: 1,
  b: 2,
  c: { a: 1, b: 2}
};

const cloned = extend({}, obj1);
cloned.a = 9999;

console.log(obj1, cloned);

To create a deep copy of your state.sections:
Generate a new object and apply the necessary modifications;

Swap out state.sections with the new object -

state.sections = Object.assign({}, newObject)

.

Your state and view will be updated accordingly.

When employing vue.set within Vuex, it seems that the state is not getting properly updated

Answer №1

Similar questions

Custom label slots in q-file for the Quasar file picker for personalized file selection label

What does the `Class<Component>` represent in JavaScript?

The Vuetify asynchronous search feature is only able to send single characters at a time, and it doesn't concatenate the characters

Is it more beneficial to utilize multiple Vue apps or just one app per page?

Align a button to the left or right based on its position within the layout

When is the right time to develop a new component?

"Error: Unable to access the property '$emit' of an undefined value" - VueJS

Guide on building a multi-page application using Vue or React

Having trouble with Vue component not showing updated data after axios POST request issue

Guide to integrating a menu in Vue.js

Tips for resolving the issue of table rows becoming detached in Laravel when using Vue.js: How can I prevent my table rows from being split

Safari is not displaying the favicon even though multiple sizes have been provided

Testing Vue.js components - monitoring changes to props

Steps for passing a layout property to a page component in Nuxt.js

PHP and Vue component not displaying properly on webpage

Loading dynamic components asynchronously in Vue 3 allows for improved performance and enhanced user experience

How can I correctly implement a pinia store within another pinia store in Vue 3?

Exploring the magic of Plugins within Vue's Single File Components

What is the best method to retrieve initial data in Vue 3 using async/await prior to rendering?

Limiting the table width in TinyMCE