vuex unknown action type

Question

Im having to use craft on a project, I have used Vue.js on the front end but cant get the VUEX store to fire actions:

My Vue store file is as follows:

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;

With the import looking as such:

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;
    }
  },
};

And my import as follows:

import store from "../vuejs/store/index";

new Vue({
  el: "#app",
  delimiters: ["${", "}"],
  store,
  methods: {
    ...mapActions({
      toggleVisible: 'bookingFunnel/toggleVisible',
      updateVehicleId: 'bookingFunnel/updateVehicleId'
    }),
  },
});

To which I get the following error when i run:

this.$store.dispatch('updateVehicleId', id)

[vuex] unknown action type: updateVehicleId

updated ```namespaced: true,``` to false which removes the error but the store is not updating — Graham Morby, Jun 29 '21 at 11:37
As you're importing the action you can just use this.updateVehicleId(id) — dantheman, Jun 29 '21 at 11:39
Where are you runing ```this.$store.dispatch('updateVehicleId', id)```? — jogarcia, Jun 29 '21 at 12:49

score 0 · Answer 1 · answered Jun 29 '21 at 16:16

I have built several projects with Vue 2 and Vuex, but haven't done a lot with modules. However, I was able to build an example based on a pared down version of your code using the Vue CLI, and it works. I did take 'mapActions' out of the loop to simplify the example. You can add it back in.

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')

score 0 · Answer 2 · answered Jan 24 '22 at 11:07

My case is not 100% the same but I got the same error message so I guess somme people in my situation would end here. It was due to module naming with namespacing enabled.

But in my case the module variable userModule has not the same name as the module namespace user.

I had to do:

const Store = createStore({
  modules: {
    'user': userModule,
    'thing': thingModule,
  },
  ...
})

Did you try?

const store =  new Vuex.Store({
  modules: {
    bookingFunnel: bookingFunnel
  }
});

vuex unknown action type

2 Answers2