Vue.js Vuex错误和单击后的操作

我在Vue JS和VueX中的一个项目上遇到问题。我们有一个模态组件，它必须在点击按钮时打开或关闭。因此，我们在Vue X中充分了解了正确的模态模块：

  namespaced: true,
  state : {
    show: false
  },
  // Getter functions
  getters : {
    showModal( state ) {
      return state.show
    }
  },
  actions : {
    showModal({commit}){
      commit('SHOWMODAL');
    }
  },
  // Mutations
  mutations : {
    SHOWMODAL(state) {
      state.show = !state.show
    }
  }
}
export default ModalModule;// export the module

在触发动作的组件上，我们导入了getter和动作

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
  data() {
    return {
    };
  },
  computed: {
    ...mapGetters('ModalModule', [
        'showModal',
    ])
  },
  components: {
  },
  methods: {
    ...mapActions('ModalModule', [
        'showModal',
    ]),
  }
};
</script>

当我点击Fermer按钮时，我看到：

Error in v-on handler: "TypeError: _vm.showModal is not a function"

---

如果您有线索，我不明白为什么要非常感谢您。

您应该在将操作映射到方法时提供别名，以便防止名称冲突：

methods: {
...mapActions('ModalModule', {
    'toggleShowModal' : 'showModal',
}),

然后在模板中使用别名：

<button class="bg-green-500 active:bg-green-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
  type="button"
  @click="toggleShowModal()"
 >

computed属性和方法都具有相同的名称，这就是为什么会出现该错误。您的问题是不能将操作和方法映射到相同的名称

showMethod

。当您在模板中调用

showMethod

时，它实际上是在尝试设置一个值（因为您有一个同名的getter）。

Error in v-on handler: "TypeError: _vm.showModal is not a function"

methods: {
...mapActions('ModalModule', {
    'toggleShowModal' : 'showModal',
}),

<button class="bg-green-500 active:bg-green-600 uppercase text-white font-bold hover:shadow-md shadow text-xs px-4 py-2 rounded outline-none focus:outline-none sm:mr-2 mb-1 ease-linear transition-all duration-150"
  type="button"
  @click="toggleShowModal()"
 >