Vuex module state undefined - vuex

Question

I'm a little confused over vuex modules.
I have a Vue component, which I show on a search page:
<template>
<div v-if="filtersPanelActive">
Filters panel
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
computed: {
...mapState(["filtersPanelActive"])
},
methods: {}
};
</script>
I then have a store.js
import Vue from "vue";
import Vuex from "vuex";
import searchPage from "./modules/searchPage.js";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
artPage,
legalsPage,
searchPage
}
});
and a search page store:
const searchPage = {
state: {
filtersPanelActive: false
},
actions: {},
mutations: {
toggleFilters(state) {
state.filtersPanelActive = !state.filtersPanelActive;
}
},
getters: {}
};
export default searchPage;
But nothing is quite working... In my vuex dev tools I have the following:
{
"artPage":{
"startDate":false,
"endDate":false,
"confirmBooking":false
},
"legalsPage":{
"filesUploaded":[
]
},
"searchPage":{
"filtersPanelActive":false
}
}
But when I inspect the Vue component it shows the following:
Why do I get undefined? I'm slightly overwhelmed by vuex, namespaces, modules etc, so feel free to over explain...
In another component I use
this.$store.commit("toggleFilters");
And its worth noting that that 'works' – as in the vuex state changes from true to false, however my mapState still isn't pulling through anything. So the module seems to be loaded correctly.

Answer 1

2018-06-05 MINOR UPDATE: Updated the mapState code to something slightly simpler.
Two things to add to your code to enable namespaces and to make sure you are referencing the right module.
In your searchPage module, add the namespaced: true property to the export as such:
const searchPage = {
namespaces: true,
state: { ... },
...
}
This enables namespacing for the module and makes it self contained and reusable.
Then in your search page component change your mapState to this:
computed: {
...mapState('searchPage', [ 'filtersPanelActive' ])
}
This will map the component variable filtersPanelActive to your searchPage module state variable filtersPanelActive. Your v-if="filtersPanelActive" line in your template should work now.
Let me know if this fixes things for you and if it doesn't please let me know and I will update my answer.