我正在尝试在我的vuejs项目中实现vuex。但是在从我的组件中调度事件时出现错误“ [vuex] unknown action type: QuestionAnswered
”。我曾经将它用于另一个运行良好的项目。但是不知道为什么这个不起作用。我的文件结构是:
store.js:
export default {
state: {
},
mutations: {
QuestionAnswered(state, QuestionDetails) {
}
},
actions: {
QuestionAnswered: (context, QuestionDetails) => {
context.commit('QuestionAnswered', QuestionDetails);
}
}
}
main.js:
import Vue from 'vue'
import Vuex from 'vuex';
import VueRouter from 'vue-router';
// components
import store from './store';
import App from './App.vue'
import QuestionOne from './components/QuestionOneTemplate';
import QuestionTwo from './components/QuestionTwoTemplate';
import QuestionThree from './components/QuestionThreeTemplate';
Vue.use(Vuex);
Vue.use(VueRouter);
const routes = [
{ path: '/', name: 'QuestionOne', component: QuestionOne },
{ path: '/property-type', name: 'QuestionTwo', component: QuestionTwo },
{ path: '/credit-score', name: 'QuestionThree', component: QuestionThree }
];
const router = new VueRouter({
routes
});
new Vue({
el: '#app',
router,
store: new Vuex.Store(store),
render: h => h(App)
})
QuestionComponent.vue:
<template>
<div>
<p>Question 1 of 11</p>
<h3>Are you a homeowner?</h3>
<a href="#" class="text-btn" style="margin-bottom: 13px" @click="homeOwner('yes')"><span>Yes, I own a home</span></a>
<a href="#" class="text-btn" @click="homeOwner('no')"><span>No, I'm looking to buy</span></a>
</div>
</template>
<script>
export default {
methods: {
homeOwner(status) {
let QuestionDetails = {'homeOwner': status};
this.$store.dispatch('QuestionAnswered', QuestionDetails);
}
}
}
</script>