Попробуйте библиотеку "
vuex-class-modules". Модули ложатся идеально. Особенность именно этой либы в том, что $store можно передать в конструктор модуля прямо внутри компонента, тем самым зарегистрировав модуль не во время компиляции через декоратор как в других решениях, а на этапе выполнения (что может оказаться важным при работе в режиме SSR, где store создаётся вызовом функции createStore(); до монтирования корневого инстанса Vue).
<!-- App.vue -->
<template>
<div id="q-app">
<router-view />
</div>
</template>
<script lang="ts">
import { ExampleModule } from 'src/store/module-example';
export default {
name: 'App',
created() {
const myModule = new ExampleModule({ store: this.$store, name: 'example'});
myModule.setProp(false); // Mutation calling;
myModule.confirmProp(); // Action calling
}
};
</script>
Файл модуля:
// src/store/module-example/index.ts
import {
VuexModule, Module, Mutation, Action
} from 'vuex-class-modules';
@Module
export class ExampleModule extends VuexModule {
prop: boolean = false;
@Mutation
setProp(payload: boolean) {
this.prop = payload;
}
@Action
confirmProp() {
this.setProp(true);
}
}
Гораздо более популярная библиотека - "
vuex-module-decorators", в ней тоже есть принцип, похожий на описанный выше и совместимый с SSR. Пример можно найти
здесь.