Позвоните $ emit после действия отправки в Vuejs

Question

У меня есть родительский компонент:

<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, я вижу это:

Я думаю, что событие было отправлено, но console.log ничего не регистрирует в консоли! Так что проводной!

Answer 1

вместо генерации событий (в этом нет ничего плохого) вы можете использовать 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>

при условии, что вы сделали какие-либо геттеры

Answer 2

Использовать ключевое слово 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));
    });
},