에러 표시 질문이요!

Typescript with Vue 실전 프로젝트

vuex-module-decorator 사용하기

해결된 질문

작성

279

개발자 도구에서 보면 아래 사진과 같은 에러가 뜨는데 무슨 이유 인가요?

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

@Module({namespaced: true, name: 'moduleB'})
export default class ModuleB extends VuexModule {
    data: string = 'moduleB';
    
    @Mutation
    setData(data: string){
        this.data = data;
    }

    @Action
    editData(data: string) {
        this.context.commit('setData', data);
    }

    get moduleBdata(){
        return this.data;
    }
}

vuejs

답변 3

성도희

지식공유자

안녕하세요!

코드를 확인해 보니, App.vue의 스토어를 호출하는 부분에서 에러가 발생하고 있습니다.

this.$store.dispatch('moduleB/editData', 'test');

vuex-module-decorator 커뮤니티를 살펴봤는데,
이와 같은 에러가 발생할 경우 동적으로 모듈을 가져오는 방법을 권장하고 있습니다.
App.vue의 스크립트 부분을 아래와 같이 수정해 보셔요 ^^

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import HelloWorld from './components/HelloWorld.vue';
    import { getModule } from "vuex-module-decorators";
    import MyStore from '@/store/moduleB.store.ts';

    @Component({
        components: {
            HelloWorld,
        },
    })
    export default class App extends Vue {
        moduleB: any;

        created(){
            this.moduleB = getModule(MyStore, this.$store);
            this.moduleB.editData('test');
        }

    }
</script>