Question

我正在使用Vuex，真的很喜欢它。但是我有一个奇怪的问题。我有一个名为filters的模块，它看起来像这样：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default {
    namespaced: true,

    state: {
        filters: [{ key: 'page', value: 1 }],
        criterias: [
            {
                name: " LIFE",
                filter: "LIFE",
                active: false
            },
            {
                name: " FACILITIES",
                filter: "FACILITIES",
                active: false
            },
            {
                name: " WIFI",
                filter: "WIFI",
                active: false
            },
            {
                name: " FUN FOR KIDS",
                filter: "FUN_FOR_KIDS",
                active: false
            },
            {
                name: " FUN FOR ADULTS",
                filter: "FUN_FOR_ADULTS",
                active: false
            },
            {
                name: " COSTS",
                filter: "COSTS",
                active: false
            },
            {
                name: " WATER QUALITY",
                filter: "WATER_QUALITY",
                active: false
            },
            {
                name: "⛵ SAIL BOAT FRIENDLY",
                filter: "SAIL_BOAT_FRIENDLY",
                active: false
            },
            {
                name: "️ MOTOR BOAT FRIENDLY",
                filter: "MOTOR_BOAT_FRIENDLY",
                active: false
            },
            {
                name: " SPANISH SPEAKING",
                filter: "SPANISH_SPEAKING",
                active: false
            },
            {
                name: " RESTAURANTS",
                filter: "RESTAURANTS",
                active: false
            },
            {
                name: "✌️ PEACE",
                filter: "PEACE",
                active: false
            },
            {
                name: "️ PARKING SPOTS (CAR)",
                filter: "PARKING_SPOTS",
                active: false
            },
            {
                name: " ENGLISH SPEAKING",
                filter: "ENGLISH_SPEAKING",
                active: false
            }
        ]
    }
}

（我将此模块导入到main.js文件中）

当我尝试在自定义组件中从此criterias获取module时：

<script>
    export default {
        data() {
            return {
                criterias: []
            }
        },

        computed: {
            ...mapState({
                criteriasVuex: state => state.filters.criterias
            })
        },

        created() {
            this.criterias = this.criteriasVuex.slice(0, 7);
        }
    }
</script>

Criterias始终为空！当我查看vue-devtools时，在组件或criterias中看不到vuex state！这怎么可能？

奇怪的是filters上的state不为空！我可以在vue-devtools中看到这一点。

Answer 1

<script>
    import {mapState} from 'vuex'
    export default {

        computed: {
            ...mapState({
                criterias
            })
        },
    }
</script>

应该使您更进一步。 “ state.filters.criterias”不起作用，因为：

您正在使用MapState函数，因此需要省略“状态”名称空间。
条件不是过滤器的子对象。

Answer 2

它确实与您显示的代码一起工作（请参见示例CodeSandbox），因此问题可能出在将过滤器模块添加到商店中的方式上。

这是一家行之有效的商店

import Vue from "vue";
import Vuex from "vuex";

import filters from "./filtersModule";

Vue.use(Vuex);

const modules = {
  filters
};

export default new Vuex.Store({
  modules
});

Vuex状态项始终为空

2 个答案: