问题描述
我不得不在一个项目上使用craft,我在前端使用了Vue.js,但无法让VUEX商店触发操作:
我的Vue store文件如下:
import Vue from "vue";
import Vuex from "vuex";
import bookingFunnel from "../store/booking-funnel/index";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
bookingFunnel
}
});
export default store;
导入看起来像这样:
export default {
namespaced: true,state: {
language: 'lang',visible: true,vehicleId: null,quote: null
},getters: {
getLanguage(state) {
return state.language;
},getVisible(state) {
return state.visible;
},getApiUrl(state) {
return state.apiUrl;
},getVehicleId(state) {
return state.vehicleId;
}
},mutations: {
toggle(state,payload) {
state.visible = payload
},setVehicleId(state,payload) {
state.vehicleId = payload;
},updateQuote(state,payload) {
state.quote = payload
}
},actions: {
toggleVisible(state) {
state.commit('toggle',!state.state.visible);
},updateVehicleId(state,payload) {
state.vehicle_id = payload;
}
},};
我的导入如下:
import store from "../vuejs/store/index";
new Vue({
el: "#app",delimiters: ["${","}"],store,methods: {
...mapActions({
toggleVisible: 'bookingFunnel/toggleVisible',updateVehicleId: 'bookingFunnel/updateVehicleId'
}),},});
运行时出现以下错误:
this.$store.dispatch('updateVehicleId',id)
[vuex] 未知操作类型:updateVehicleId
解决方法
我已经用 Vue 2 和 Vuex 构建了几个项目,但没有做过很多模块。但是,我能够使用 Vue CLI 基于您的代码的精简版本构建一个示例,并且它可以工作。我确实将“mapActions”排除在循环之外以简化示例。您可以重新添加它。
booking-funnel.js
export default {
namespaced: true,state: {
vehicleId: null,},getters: {
getVehicleId(state) {
return state.vehicleId;
}
},mutations: {
setVehicleId(state,payload) {
state.vehicleId = payload;
console.log(state.vehicleId);
},actions: {
updateVehicleId(context,payload) {
context.commit('setVehicleId',payload)
}
},};
store/index.js
import Vue from "vue";
import Vuex from "vuex";
import bookingFunnel from "../module/booking-funnel.js";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
bookingFunnel
}
});
export default store;
VueModuleAction.vue
<template>
<div class="row">
<div class="col-md-6">
<h3>Vuex Module Action</h3>
<button type="button" class="btn btn-secondary" @click="updateId">Update Vehicle ID</button>
</div>
</div>
</template>
<script>
export default {
methods: {
updateId() {
this.$store.dispatch('bookingFunnel/updateVehicleId',2);
},created() {
console.log(this.$store.getters['bookingFunnel/getVehicleId']);
}
}
</script>
App.vue
<template>
<div id="app" class="container">
<vuex-module-action />
</div>
</template>
<script>
import VuexModuleAction from '@/components/stackoverflow/vuex-module-action/VuexModuleAction'
export default {
name: 'App',components: {
VuexModuleAction
},}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/components/stackoverflow/vuex-module-action/store'
import 'bootstrap/dist/css/bootstrap.css'
Vue.config.productionTip = false
new Vue({
store,render: h => h(App),}).$mount('#app')