After integrating Vuex into my project, I have encountered a peculiar issue. Within the filters module, the structure is as follows:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default {
namespaced: true,
state: {
filters: [{ key: 'page', value: 1 }],
criterias: [
// citeria objects
]
}
}
(Note: This module is imported in my main.js file)
In an attempt to access the criterias within this module from 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>
The issue lies in the fact that the criterias array remains empty. Even when inspecting with vue-devtools, no data appears under the component or within the vuex state. How could this be happening?
The perplexing aspect is that the filters section within the state is not empty, as evidenced by vue-devtools.