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

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

我这样试过：

我的

父模块.ts

：

import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators';

export class ParentStore extends VuexModule {
    public get getterForInherit(): any {
        return someData
    }
}

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)

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)

子模块：

child one.ts

：

import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators';

export class ParentStore extends VuexModule {
    public get getterForInherit(): any {
        return someData
    }
}

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)

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)

子2.ts

：

import {Action, getModule, Module, Mutation, VuexModule} from 'vuex-module-decorators';

export class ParentStore extends VuexModule {
    public get getterForInherit(): any {
        return someData
    }
}

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)

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

不可用。有可能这样做吗？

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

您可以这样做：

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

---

我也遇到了同样的问题，并找到了“vuex类模块”数据包的解决方案。它有类似的装饰

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模块装饰器在整个项目中用于键入vuex，因此我也应该在我的案例中使用它。