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

Posted 2023-02-23

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

【英文标题】：Error in v-on handler: "TypeError: Cannot read property 'dispatch' of undefined"v-on 处理程序中的错误：“TypeError：无法读取未定义的属性 'dispatch'”

【发布时间】：2021-04-17 06:09:22

【问题描述】：

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

【问题讨论】：

您的问题不清楚。是或否：它是否适用于mounted？它在点击时有效吗？当您尝试使用它时，可能还没有准备好道具。您是否在父项中异步加载道具？

让我编辑我的问题。它在onclick 中不起作用。对于mounted，它正在工作。 props 已准备就绪，因为我可以在安装组件时将其记录在控制台中。

点击时看到日志了吗？

如果你问onclick功能是否正常工作，是的，我可以在onclick功能中使用console.log编辑器

你从哪里得到标题中提到的dispatch 错误？我在代码中没有看到任何dispatch

【参考方案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"]),

【讨论】：

文件名为 tile.js，import import tiles from './modules/tiles'

很抱歉这是我的错字。实际上它是tiles.js。我会编辑帖子。如果是拼写错误，vue 会显示导入错误吗？