Following a brief exchange of comments, I delved into my resources and unearthed a relatively straightforward example of a Vuex Module that I had recently constructed. Here, I present the store, module, and component.
Your application is undeniably more intricate, but one notable distinction I observed in your Vuex store was how you imported your module:
import * as groceryStore from "./modules/groceries";
In contrast, I approached module importation in my store slightly differently:
import userModule from './modules/user-store-module.js'
Although I am not an expert on JavaScript modules, I thought it might be worth mentioning. Below are the source files I mentioned:
UPDATE: I included namespacing, getters, mutations, and additional functionality for components to utilize them.
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import userModule from './modules/user-store-module.js'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
userModule: userModule
}
})
/store/modules/user-store-module.js
const userModule = {
namespaced: true,
state: () => ({
users: [
{
id: 1,
name: 'User1',
gender: 'male'
},
{
id: 2,
name: 'User2',
gender: 'female'
},
{
id: 3,
name: 'User3',
gender: 'male'
},
{
id: 4,
name: 'User4',
gender: 'female'
},
]
}),
getters: {
getMaleUsers: state => {
return state.users.filter( user => user.gender === 'male')
},
getFemaleUsers: state => {
return state.users.filter( user => user.gender === 'female')
},
},
mutations: {
addUser(state, newGender) {
let nextId = state.users.length + 1;
state.users.push({
id: nextId,
name: 'User' + nextId,
gender: newGender
})
}
}
}
export default userModule;
VuexModule.vue
<template>
<div class="vuex-module">
<div class="row">
<div class="col-md-6">
<h4>Users</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>GENDER</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.gender }}</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-secondary" @click="addUser">Add Random User</button>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<h4>Male Users</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>GENDER</th>
</tr>
</thead>
<tbody>
<tr v-for="user in maleUsers" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.gender }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4>Female Users</h4>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>NAME</th>
<th>GENDER</th>
</tr>
</thead>
<tbody>
<tr v-for="user in femaleUsers" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.gender }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
gender: 'male'
}
},
computed: {
users() {
return this.$store.state.userModule.users;
},
maleUsers() {
return this.$store.getters['userModule/getMaleUsers'];
},
femaleUsers() {
return this.$store.getters['userModule/getFemaleUsers'];
}
},
methods: {
addUser() {
let nextGender = this.gender === 'male' ? 'female' : 'male';
this.gender = nextGender;
this.$store.commit('userModule/addUser', this.gender);
}
}
}
</script>