Dynamically creating a reactive array in the Vuex's state

Question

My component would like to add a new reactive-array field to the SST (vuex). I tried in beforeCreate hook, but the added array is not reactive; it's just a plain JS array.

Note that this is not the same as adding/removing elements from an existing array created at the Vue's initialization time. Such arrays are "wrapped" and become reactive as expected, mindful of "Array Change Detection" gotchas.

In my case, I'm trying to dynamically add an entirely new field of array type to the SST and make it reactive at the same time. Possible?

How exactly are you adding the new field of array type? Can you show some code? Also, are you aware of Vue.set()? — acdcjunior
– acdcjunior, Commented Feb 23, 2018 at 14:23
Thanks a lot - I tried this.$set but didn't get the expected result - but now I'm doubting myself if I did use it right;Vue.set worked. — Slawomir
– Slawomir, Commented Feb 23, 2018 at 14:58
I added an answer referring to the docs. See if it matched your problem. — acdcjunior
– acdcjunior, Commented Feb 23, 2018 at 15:14
It did & and gave you the rightful credit. Thanks for helping. — Slawomir
– Slawomir, Commented Feb 23, 2018 at 15:54

tony19 · Accepted Answer · 2022-07-15 20:38:53Z

7

Have a look at Reactivity in Depth - Change Detection Caveats:

Change Detection Caveats

Due to the limitations of modern JavaScript, Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

But you say you are adding an array dynamically:

I'm trying to dynamically add an entirely new field of array type to the SST and make it reactive at the same time. Possible?

From the docs (bold is mine):

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, key, value) method:

Vue.set(vm.someObject, 'myArrayName', [1,2,3]);

Which should help you making your array reactive.

edited Jul 15, 2022 at 20:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 23, 2018 at 15:13

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Piotr Żak Over a year ago

Broader description gist.github.com/DawidMyslak/2b046cca5959427e8fb5c1da45ef7748

Piotr Żak · Accepted Answer · 2020-11-16 15:04:32Z

I see two problems here:

add dynamically array using vuex.
add dynamically element to this array and render this element.

I've initiate array if not exist in add method because when I'm receiving data from server myArray is not exist.

My solutuion below:

myVuexArray.js

import Vue from 'vue'

const state = {
  myObject: {
    myArray: [],
  }
}

const getters = {
  getMyArray: state => {
    return state.myObject.myArray;
  }
}

const mutations = {
  addElementToArray(state, value) {
    if (state.myObject.myArray === null || state.myObject.myArray === undefined || state.myObject.myArray === '') {
      // initiate array
      state.myObject.myArray = [];
    }
    // add new element to array
    Vue.set(
        state.myObject.myArray,
        state.myObject.myArray.length,
        value
    );

    // creates a new array everytime this solves the reactivity issue
    Vue.set(state, 'myObject.myArray', state.myObject.myArray);

    return state.myObject.myArray;
  },
  removeElementFromArray(state, index) {
    state.myObject.myArray.splice(index, 1);
  }
}

export default {
  state,
  mutations,
  getters
}

Best regards

Guillaume Meral · Accepted Answer · 2018-02-23 14:51:44Z

0

Dynamic module registration could help you to achieve this : https://vuex.vuejs.org/en/modules.html

This would allow you to dynamically register a new module containing your array field in the beforeCreate hook.

answered Feb 23, 2018 at 14:51

Guillaume Meral

4622 silver badges9 bronze badges

Collectives™ on Stack Overflow

Dynamically creating a reactive array in the Vuex's state

3 Answers 3

Change Detection Caveats

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Change Detection Caveats

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related