Looking for guidance on how to access module store/state from another file. Here is a snippet of my code:
/store/index.js
import Vuex from 'vuex';
import categories from './modules/categories';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
},
actions: {
},
mutations: {
},
getters: {
},
modules: {
categories,
},
});
export default store;
/store/modules/categories.js
const categories = {
state: {
categories: [
{
name: 'category1'
path: 'path/to/there'
subcategories: [
{
name: 'subcategory1'
path: 'path/to/other/there'
subsubcategory: [
{
name: 'subsubcategory1'
path: 'path/to/other/there'
}
{
name: 'subsubcategory1'
path: 'path/to/other/there'
}
]
}
{
name: 'subcategory2'
path: 'path/to/other/there'
}
]
}
{
name: 'category2'
path: 'path/to/there'
subcategories: [
{
name: 'subcategory2'
path: 'path/to/other/there'
}
{
name: 'subcategory3'
path: 'path/to/other/there'
}
]
}
]
},
actions: {
},
mutations: {
},
getters: {
},
}
In the /home.vue file, I am trying to access the modules' store/state to filter and display results. Here's part of the code:
<template>
<div>
<Headers></Headers>
<div class="user row">
<p>User Page</p>
<p>I want to be able to access modules store/state here and use getters to filter some results from state.</p>
</div>
<Footers></Footers>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex';
import Headers from '/Headers';
import Footers from '/Footers';
export default {
name: 'home',
data() {
return {
};
},
methods: {
},
components: {
Headers,
Footers,
},
computed: {
...mapGetters([
'',
]),
...mapState([
'categories',
]),
},
};
</script>
<style lang="scss" scoped>
</style>
Previous attempts at accessing and looping through categories were successful, but after correcting my store module structure, I'm facing challenges in accessing its state.
Thank you in advance, Cheers