在vuex模块装饰器中创建可重用的getter

Question

在使用vuex模块装饰器时遇到了这样的问题。我想创建一些父模块，这样子模块就可以从它扩展并继承它的action和getter。但是getter不是继承的。

我试过这样做：

我的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-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)

但是当我将这些模块导入组件时，getterForInherit是不可用的。可以这样做吗？

Answer 1

我认为不要尝试使用不同的包来处理您的突变、操作和getter；根据您的问题，我假设您希望能够从父组件或子组件访问您的getter和操作。如果您已经安装了vuex，则可以使用它。

你可以这样做：

import { mapGetters, mapActions, mapMutations } from 'vuex'
methods: {
...mapActions(['submitTransaction', 'submitNotification']),
...mapMutations(['clearNotificationData']),
},
computed: {
...mapGetters([
  'messageData',
  'isMessageLoaded',
  'isProcessingRequest',
]),

Answer 2

我也遇到了同样的问题，并找到了"vuex-class-modules“包的解决方案。它有类似的装饰器。

export class LoadItems extends VuexModule {
    public items = [];
    
    @Mutation
    public SET_ITEMS(...
    
    @Action
    public getItems() {
        this.SET_ITEMS(['hello', 'world'])
    }

在您的孩子中扩展这个类之后：

@Module
class Contract extends LoadItems {
   // your additional code here
}
export const ContractModule = new Contract({ store, name: "contract" });

现在，您可以使用命令获取任何语句和调用任何操作：

ContractModule.getItems();

当然，您必须在此之前导入它。