为什么这个控制台错误显示这个Vuex突变提交后?

Question

我是Vue和Vuex的新手，在在商店中提交声明的突变之后，我遇到了这个控制台错误，顺便说一下，除了控制台错误之外正在做它的工作． 错误是:ReferenceError: ADD_EVENT is not defined at eval (EventCreate.vue?89e7:82:1)，这是不言自明的。我可能错过了一步或在错误的地方调用的东西，但这一切似乎都在适当的地方，所以这里是我的代码:商店:

import { createStore } from 'vuex'
export default createStore({
state: {
user: 'TommyDemian',
events: []
},
mutations: {
ADD_EVENT(state, event){
state.events.push(event);
}
},
getters: {
},
actions: {
},
modules: {
}
})

提交突变的组件:

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>

Answer 1

您应该调度提交突变的操作:

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

Answer 2

您正在调用变量ADD_EVENT。相反，您应该传递您的突变方法的字符串。

store.commit("ADD_EVENT", event);