vuex 未知动作类型

如何解决vuex 未知动作类型

我不得不在一个项目上使用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')