Default.dispatch is not a function(when passing data with dispatch)

Im using vuex, i want to execute an action and pass the value of id to the state, i get error(Error in mounted hook: “TypeError: modules_vendor_store_index__WEBPACK_IMPORTED_MODULE_3_.default.dispatch is not a function”) and (TypeError: modules_vendor_store_index__WEBPACK_IMPORTED_MODULE_3_.default.dispatch is not a function)
file.vue:


    import store from "@/modules/vendor/store/index";
    
    export default {
      data() {
        return {
          id: this.$route.params.id,
    }
    mounted() {
       //let payload = {'id': this.id}
       store.dispatch("setVendorId", this.id);
    }
    }

store/index.js

import state from './state';
import * as getters from './getters';
import * as mutations from './mutations'
import * as actions from './actions'
export default ({
    state,
    getters,
    actions,
    mutations
});

actions.js:


      export const setVendorId = ({ commit }, id ) => {
         commit("SET_VENDOR_ID", id);
      }

mutations.js:


      export const SET_VENDOR_ID = (state, {data}) => {
        state.vendorId = data;
         console.log('id vendeur mutation:',state.vendorId )
    
      };

state.js:


    export default {
        vendorClassificationList: [],
        vendorId: null,
    
    }

console.log(store):

Hi,

Could you share what’s logged on console when you do console.log(store) in mounted() hook?

Also, can you share your @/modules/vendor/store/index file as well?

As far as I can tell (without seeing your index.js), you’re just trying to access an object, not even your store. You need to construct an actual Vuex store. Please review the Vuex guide: Getting Started | Vuex

done the console.log(store) and store/index.js are shared on the question

Thank you for sharing the data.

The missing point in your store/index.js file is this.

You are just exporting an object that includes state, getters, actions and mutations. There is no VueX store created.

Because of that, you can’t access dispatch method which store originally includes.

To solve this, you can import createStore method from vuex and export with passing state, getters, actions and mutations parameters into the method, like this.

import { createStore } from "vuex";
import state from "./state";
import * as mutations from "./mutations";
import * as actions from "./actions";
import * as getters from "./getters";

const store = createStore({
  state,
  getters,
  mutations,
  actions
});

export default store;

Then you can console.log(store) to see dispatch method in the store object.

You can also check out the working example to see it in action.

If you have any questions, ask away, I’ll be happy to answer them :slight_smile:

1 Like