Vuejs에서 디스패치 처리 후 $emit에 문의

Vuejs에서 디스패치 처리 후 $emit에 문의

상위 컴포넌트가 있습니다.

<template>
    <div class="w-full">
        <div class="card-body">
            <city-edit-form :form="form" :resource="resource" @save_resource="func">
            </city-edit-form>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        func() {
            console.log("test");
        }
    }
};
</script>

하위 구성 요소:

<template>
  <div>
    <form action="#" method="POST" @submit.prevent="submit" v-else>
        <button type="submit" class="btn-green">Save</button>
    </form>
  </div>
</template>

<script>
import { UPDATE_RESOURCE } from "../../../Stores/action-types";

export default {
    props: {
        form: { required: true },
        resource: { required: true }
    },
    methods: {
        submit() {
            this.$store
                .dispatch(`city/${UPDATE_RESOURCE}`, this.form)
                .then(() => this.$emit("save_resource"));
        }
    }
};
</script>

액션은 다음과 같습니다.

[UPDATE_RESOURCE]({ commit, state }, form) {
    commit(SET_LOADING, true);
    return ResourceService.update(state.resource.id, form)
            .then(({ data }) => {
                commit(SET_RESOURCE, data);
            })
            .catch(errors => {
                commit(SET_ERRORS, errors.response.data);
            })
            .finally(() => commit(SET_LOADING, false));
    });
},

양식을 제출할 때 액션은 발송되었지만 아무것도 발송되지 않았습니다.

콘솔에 기록된 것이 없습니다.어디서 실수를 하죠?

갱신하다

Vue 툴바의 [이벤트(Event)]탭을 체크하면, 다음과 같이 표시됩니다.

이벤트가 전달된 것 같은데console.log콘솔에 아무것도 기록하지 않습니다!유선이야!

해결 또는 거부가 트리거되는 동안 return 키워드 사용

[UPDATE_RESOURCE]({ commit, state }, form) {
    commit(SET_LOADING, true);
    return new Promise((resolve, reject) => {
        ResourceService.update(state.resource.id, form)
            .then(({ data }) => {
                commit(SET_RESOURCE, data);
                return resolve();
            })
            .catch(errors => {
                commit(SET_ERRORS, errors.response.data);
                return reject();
            })
            .finally(() => commit(SET_LOADING, false));
    });
},

이벤트를 내보내는 대신 사용할 수 있습니다(그것은 문제가 되지 않습니다.mapGetters

<template>
    <div class="w-full">
        <div class="card-body">
            <city-edit-form :form="form" :resource="myResource">
            </city-edit-form>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {

  computed: {
    ...mapGetters({
      myResource: 'Stores/action-types/SET_RESOURCE',  <---- needs to be modified
    }),
  }
};
</script>

이것은 당신이 어떤 일을 할 수 있도록

언급URL : https://stackoverflow.com/questions/58306174/call-emit-after-dispatch-action-in-vuejs