Question

使用vuex-module-decorators解决了此类问题。我想创建一些父模块，以便可以从其扩展子模块并继承其操作和获取器。但是吸气剂不是继承的。

我尝试过这种方式：

我的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和操作。如果已经安装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();

当然，您必须先导入它。

在vuex-module-decorators中创建可重用的getter

2 个答案: