Why is this console error showing after this Vuex mutation commit?-CodePudding

I'm quite new with Vue and Vuex, I'm having this console error after committing a declared Mutation in the store, which by the way, besides from the console error is doing its job. The error which is: ReferenceError: ADD_EVENT is not defined at eval (EventCreate.vue?89e7:82:1), it's pretty much self-explanatory. I'm probably missing one step or calling something in the wrong place but it all seems to be in place, so here's my code: the store:

import { createStore } from 'vuex'

export default createStore({
  state: {
    user: 'TommyDemian',
    events: []
  },
  mutations: {
    ADD_EVENT(state, event){
      state.events.push(event);

    }
  },
  getters: {
  },
  actions: {
  },
  modules: {
  }
})

The component committing the mutation:

export default {
  name:'EventCreate',
  setup () {
    const store = useStore();

    const onSubmit = () => {
      event.organizer = store.state.user;
      event.id = uuidv4();
      apiClient.postEvent(event).then(() => {
        store.commit(ADD_EVENT, event);
      })
      .catch((error) => console.log(error));
    };
  
      const event = reactive ({
        id: '',
        category: '',
        title: '',
        description: '',
        location: '',
        date: '',
        time: '',
        organizer: ''
      });

      return {
        onSubmit,
        categories,
        event,
        store,
      }
    }
  }
</script>

CodePudding user response：

You should dispatch action which commit mutation:

actions: {
  setEvent({ commit }, event) {
    apiClient.postEvent(event)
      .then((response) => {
        commit('ADD_EVENT', response);
      })
      .catch((error) => console.log(error));
  },
};

CodePudding user response：

You are calling a variable ADD_EVENT. Instead you should pass the string of your mutation method.

store.commit("ADD_EVENT", event);