Vuex state item is always empty

Question

I'm using Vuex and realy like it. However I've got a weird problem. I've got a module called filters it looks like this:

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
            }
        ]
    }
}

(I import this module in my main.js file)

When I try to get the criterias from this module in a custom component:

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

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

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

Criterias is always empty! When I look in vue-devtools no criterias are visible in my component or vuex state!!! How is this possible?

The weird thing is that filters on the state is not empty! I can see that in vue-devtools.

Answer 1

It does work with the code you have shown (see sample CodeSandbox), so likely the problem is in the way the filter module is added to the store.

Here is a store that works

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>

Should bring you further. 'state.filters.criterias' won't work because:

1. You're in the MapState function, thus the "state" namespace needs to be omitted.
2. criterias is not a subobject of filters.