Блог

Главная - Вопросы по программированию - Ошибка Vuex и действие после щелчка

Ошибка Vuex и действие после щелчка

#vue.js #vuex

#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

В компоненте, который запускает действие, мы импортировали получатели и действия

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

я не понимаю, почему большое вам спасибо, если у вас есть ключ.

Комментарии:

1. Оба вычисляемых свойства и метода имеют одно и то же имя, поэтому вы получаете эту ошибку.

2. Ваша проблема заключается в том, что вы не можете сопоставить оба действия и методы с одним и тем же именем showMethod . Когда вы вызываете showMethod в своем шаблоне, он фактически пытается установить значение (потому что у вас есть средство получения с тем же именем).

Ответ №1:

Вы должны указать псевдоним при сопоставлении вашего действия с методами, чтобы предотвратить столкновение имен:

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