[SOLVED] Vuex dynamic array without declaration at start

Vuex dynamic array without declaration at start

I have a state containing an "array" of boolean.

state:{ myArray:{} }

I use mutation for setting the value

 mutations: {
        Deactivate: function (state, name) {
          
            var storeName = 'Default';
            if (name)
                storeName = name.storeValue;
           
            state.myArray[storeName] = false; //got a function for activate
           
        },

I got a component that use the array with the given "name".

this.$store.state.ABC.myArray[this.name];

my component never refresh with the store value unless I declare the boolean on state declaration.

    state:{ myArray:{ Default: false } }

did I miss something so that components that use the array is refresh and I dont declare each part of the array. (dynamic array/object)

Solution

at the start of your file, you can import the vue setter :

import { set } from 'vue'

When you assign a key/value to your object, you should use this approach :

set(state.myArray, 'storeName',  false);

Please, take a look at https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects