vuex未知操作类型:QuestionAnswered

时间:2018-09-12 06:51:39

标签: vuejs2 vuex

我正在尝试在我的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>

0 个答案:

没有答案