Creating reusable getters in vuex-module-decorators - vue.js

Question

Faced such a problem using vuex-module-decorators. I wanted to create some parent module so child modules could be extended from it and inherit its actions and getters. But getters are not inherited.
I tried it that way:
My parent-module.ts:
import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators';
export class ParentStore extends VuexModule {
public get getterForInherit(): any {
return someData
}
}
Child modules:
child-one.ts:
import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators'
import {ParentModule} from './parent-module';
#Module({dynamic: true, store: Store, name: 'childOne', namespaced: true})
class FirstChildModule extends ParentModule {
public get SecondChildGetter(): number {
return 1;
}
}
export const FirstChildStore: ParentModule = getModule(FirstChildModule)
child-two.ts:
import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators'
import {ParentModule} from './parent-module';
#Module({dynamic: true, store: Store, name: 'childTwo', namespaced: true})
class SecondChildModule extends ParentModule {
public get FirstChildGetter(): number {
return 2;
}
}
export const SecondChildStore: ParentModule = getModule(SecondChildModule)
But when I import those modules to components getterForInherit is not available. Is it possible to do it this way?

Answer 1

I think instead of trying to use a different package for handling your mutations, actions and getters;
From your question I assume you want to be able to access your getters and actions either from the parent or child component. You can use vuex if you already have it installed.
You can do something like this:
import { mapGetters, mapActions, mapMutations } from 'vuex'
methods: {
...mapActions(['submitTransaction', 'submitNotification']),
...mapMutations(['clearNotificationData']),
},
computed: {
...mapGetters([
'messageData',
'isMessageLoaded',
'isProcessingRequest',
]),

Answer 2

I had same problem and found a solution with "vuex-class-modules" packet. It have similar decorators.
export class LoadItems extends VuexModule {
public items = [];
#Mutation
public SET_ITEMS(...
#Action
public getItems() {
this.SET_ITEMS(['hello', 'world'])
}
After you extend this class in your child:
#Module
class Contract extends LoadItems {
// your additional code here
}
export const ContractModule = new Contract({ store, name: "contract" });
Now you can get any statements and call any action with command:
ContractModule.getItems();
Of course, you have to import it before.