Приведу один из вариантов решения.
Структура директорий:
- store
- - modules
- - - module_1
- - - ...
- - - module_n
- - - - index.ts
- - - - actions.ts
- - - - getters.ts
- - - - mutations.ts
- - autoloader.ts
- - index.ts
- - types.ts
Типы(types.ts
):
export type User {
id: number
name: string
email: string
}
export interface UserState {
users: User[]
}
export interface RootState {}
Пример модуля:
import { getters } from './getters'
import { actions } from './actions'
import { mutations } from './mutations'
import type { Module } from 'vuex'
import type { UserState, RootState } from '@/store/types'
const state: UserState = {
users: [{
id: 1,
name: 'John Doe',
email: 'jd@ya.ru'
}],
}
const user: Module<UserState, RootState> = {
namespaced: true,
state,
getters,
actions,
mutations,
}
export default user
Загрузчик:
import type { Module } from 'vuex'
import type { RootState } from './types'
export type ModuleProperty = {
[key: string]: Module<object, RootState>
}
/**
* @returns {ModuleProperty}
*/
export default function autoloader() {
const modules: ModuleProperty = {}
const context = require.context('./modules', true, /index\.ts$/i)
context.keys().forEach((path) => {
const find = /(?<module_name>\w+)\/index\.ts/.exec(path)
const module_name = find?.groups?.module_name
if (module_name) {
const module = context(path)
modules[module_name] = module.default
}
})
return modules
}
index.ts
import Vue from 'vue'
import Vuex from 'vuex'
import autoloader from './autoloader'
import type { RootState } from './types'
import type { ModuleTree, StoreOptions } from 'vuex'
const modules: ModuleTree<RootState> = autoloader()
const store: StoreOptions<RootState> = {
modules,
}
Vue.use(Vuex)
export default new Vuex.Store<RootState>(store)
Дополнительная информация: