Vuex getter 未定义但状态出现在控制台中

Question

I have a slightly strange problem .. I am not able to return a specific property in my object that is in the "state" of vuex.

To have a better understanding, I'll put a snippet of my store below:

state: {
        activeIdentifier: '', //controlar qual modulo que esta ativo
        configListActive: { entity: {} }, //controla qual instancias que esta ativa na visao
        listController: {}, //instancias dos controllers
        filterParams:{}, //params de filtros feitos
    },

    getters: {
        configListActive: state => param =>{            
            console.log("State:", state.configListActive)
            console.log("Param:", param)
            console.log("Result:", state.configListActive[param])
            return state.configListActive[param];
        },
        filterParams: state => param => {
            return state.filterParams[param];
        },
        listController: state => param => {
            return state.listController[param];
        }
    },
[....]

I'm passing a parameter in the getters "configListActive", and my object "configListActive" exists the property, however, the return is "undefined", I will put below the print of the debug that I made.

What could have been done wrong?

Answer 1

You've run into one of Vue's change detection caveats . From the docs:

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... However, it's possible to add reactive properties to a nested object using the Vue.set(object, propertyName, value) method

From within a component you can use:

this.$set(object, propertyName, value)

If the caveat was encountered in Vuex, you can import Vue into the Vuex module:

import Vue from 'vue';

and use Vue.set in a mutation like:

Vue.set(state.object, property, value);