v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'dispatch'”

Question

1.mapGetters 正在工作。 2.在hello.vue的mounted生命周期中调用的fetchTiles正在工作 3.fetchId在click.vue的onClick方法中调用不工作 可能是什么问题？

你好.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>

点击.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 在 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

该模块称为 tile，但在您的导入中使用了 tile：

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

FetchId 是 tile 模块中的一个动作，所以：

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