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

Question

我有一个有点奇怪的问题.. 我无法 return 我对象中处于 vuex“状态”的特定属性。

为了更好地理解，我将在下面放一段我的商店：

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];
        }
    },
[....]

我在 getters“configListActive”中传递了一个参数，我的对象“configListActive”存在属性，然而，return 是“未定义的”，我将放在下面打印我所做的调试。

哪里可能做错了？

Answer 1

您运行进入了 Vue 的 change detection caveats 之一。来自文档：

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

您可以在组件内使用：

this.$set(object, propertyName, value)

如果在Vuex中遇到该警告，可以将Vue导入到Vuex模块中：

import Vue from 'vue';

并在突变中使用 Vue.set，例如：

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

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

Vuex getter is undefined but state appears in console

javascript

vue.js

vuex

vuejs2

vue-reactivity