vuex-module-decorator에서 재사용 가능한 getter 생성

vuex-module-decorator에서 재사용 가능한 getter 생성

vuex-module-decorator를 사용하여 이러한 문제에 직면했습니다.부모 모듈을 생성하여 자녀 모듈을 확장하고 동작과 getter를 상속할 수 있도록 하고 싶었습니다.하지만 getters는 유전되지 않는다.

나도 그렇게 해봤어

나의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)

하지만 이 모듈을 컴포넌트로 Import하면getterForInherit사용할 수 없습니다.이런 식으로 할 수 있을까요?

돌연변이, 액션 및 getter를 처리하기 위해 다른 패키지를 사용하는 것이 아니라 당신의 질문에서 getters 및 actions에 부모 또는 자녀 컴포넌트에서 접근할 수 있기를 원한다고 생각합니다.vuex가 이미 설치되어 있으면 사용할 수 있습니다.

다음과 같은 작업을 수행할 수 있습니다.

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

같은 문제가 발생하여 "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();

물론 그 전에 수입해야 합니다.

언급URL : https://stackoverflow.com/questions/58949347/creating-reusable-getters-in-vuex-module-decorators