How to use multiple Vuex Stores with Inertia and Laravel 9? - vuejs3

Question

Below is how I registered one Vuex store in app.js.
import './bootstrap';
import '../css/app.css';
import { createApp, h } from 'vue';
import { createInertiaApp } from '#inertiajs/inertia-vue3';
import { InertiaProgress } from '#inertiajs/progress';
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
import { ZiggyVue } from '../../vendor/tightenco/ziggy/dist/vue.m';
import store from '#/Pages/Users/Store'; // Vuex Store, Users module
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue')),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.use(ZiggyVue, Ziggy)
.use(store)
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
Below is the Pages/Users/Store/index.js.
import { createStore } from "vuex";
export const store = createStore({
state: {
count: 123,
name: "My name"
}
});
export default store;
Below is how I use the Vuex store state in a module's component Pages/Users/Index.vue.
<script>
import { mapState } from "vuex";
export default {
computed: mapState({
count: state => state.count,
name: state => state.name,
email() {
return "hello#world.com";
}
})
};
</script>
<template>
<div>
{{ email }} {{ count }} {{ name }}
</div>
</template>
If I have many pages and many modules such as Users, Chirps, Customers, each module for each page. How can I load and use only the Vuex Store of that module when Inertia renders that Vue component of an individual page?