Элемент состояния Vuex всегда пуст

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

Он работает с кодом, который вы показали (см. Пример 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
});

Answer 2

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

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

Должен привести вас дальше.'state.filters.criterias' не будет работать, потому что:

1. Вы находитесь в функции MapState, поэтому пространство имен "state" должно быть опущено.
2. критерий неподобъект фильтров.