Vuex 오류 및 클릭 후 작업

Vuex 오류 및 클릭 후 작업

Vue JS와 VueX의 프로젝트에 문제가 있습니다.버튼을 클릭하기만 하면 열리거나 닫히는 Modal 컴포넌트가 있습니다.따라서 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

액션을 트리거하는 컴포넌트에서 getters와 액션을 Import했습니다.

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

템플릿에서 다음을 수행합니다.

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

그러나 이 버튼을 클릭해도 동작하지 않고 모달 열기 버튼을 클릭하면 다음과 같이 표시됩니다.

                    <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="showModal()"
                    >

다음 오류 메시지가 나타납니다.

Computed property "showModal" was assigned to but it has no setter.

페르머 버튼을 클릭하면 다음과 같은 메시지가 나타납니다.

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()"
 >

언급URL : https://stackoverflow.com/questions/64694856/vuex-error-and-action-following-the-click