javascript - Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"

Question

1.mapGetters are working. 2.fetchTiles called in mounted life cycle of hello.vue is working 3.fetchId called in onClick method of click.vue is not working what could be the problem?.

Hello.vue

<script>
import { mapGetters, mapActions } from "vuex";
import { startEditor, addNodeBoard } from "../utilities/utilities";
import Drawflow from "drawflow";
export default {
  name: "HelloWorld",
  data() {
    return {
      editor: null,
    
    };
  },
  props: {
    msg: String,
  },
  computed: mapGetters(["allTiles"]),
  methods: {
    ...mapActions(["fetchTiles"]),
   
  },
  mounted() {
    this.fetchTiles();
  },
};
</script>

click.vue

<template>
  <div class="card-devices" v-on:click="onClick">
    <div class="body" v-html="symbol"></div>
    <span> {{ names }} </span>
    <div class="misc">
      <i class="fas fa-trash"></i>
      <i class="fas fa-pen"></i>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      title: "",
      ids: "",
    };
  },
  props: {
    names: String,
    symbol: String,
    editors: Object,
  },
  methods: {
    ...mapActions(["fetchId"]),
    onClick: function() {
      this.ids = this.editors.node_selected.getAttribute("id");
      this.fetchId(this.ids);
      console.log("clicked");
    },
   
  },
};
</script>
<style scoped>
.fas {
  padding: 0 4px 0 4px;
}
.misc {
  width: 30%;
  display: flex;
  justify-content: flex-end;
}
.card-devices {
  display: flex;
  justify-content: space-evenly;
}
</style>

store is called in main.js

main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import tiles from './modules/tiles'
Vue.use(Vuex)

export default new Vuex.Store({
  
  modules: {
    tiles
  }
})

tiles.js

const state = {
  tiles: [...tilesCollections],
  editor: {},
};

const getters = {
  allTiles: (state) => state.tiles,
};

const actions = {
  fetchTiles({ commit }) {
    commit("setTiles", tilesCollections);
  },
  fetchId({ commit }, ids) {
    console.log(ids);
    commit("setEditor", ids);
  },
};
const mutations = {
  setEditor: (state, editor) => (state.editor = editor),
  setTiles: (state, tiles) => (state.tiles = tiles),
};
export default {
  state,
  getters,
  actions,
  mutations,
};

Answer 1

The module is called tile but in your import you have used tiles:

 import Vue from 'vue'
    import Vuex from 'vuex'
    import tiles from './modules/tile'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      
      modules: {
        tiles
      }
    })

FetchId is an action in the tile module so:

...mapActions("tiles", ["fetchId"]),