0

Сейчас у меня есть методы которые увеличивают/уменьшают count по клику на кнопку, вызываются методы, в которых через this.$store.dispatch обрабатываются action. Но, как тоже самое провернуть если использовать импортированный mapActions ведь просто ...mapActions(['название']), не является методом. Подскажите как реализовать, чтоб тот же функционал остался, но с использованием mapActions

<template>
   <div>
      <p>{{ `Счетчик: ${count}` }}</p>
      <button @click="neg" class="btn-negative" type="button">-</button>
      <button @click="pos" class="btn-positive" type="button">+</button>
   </div>
</template>

<script>
// import { mapActions } from 'vuex'

   export default {
      computed: {
         count() {
           return this.$store.state.count
         },
      },
      methods: { 
         pos() {
            return this.$store.dispatch('positCount')
         },
         neg() {
            return this.$store.dispatch('negativeCount')
         }
      }
   }
</script>

1 ответ 1

0
<template>
  <div>
    <p>Счетчик: {{ count }}</p>
    <button @click="() => negativeCount()" class="btn-negative" type="button">-</button>
    <button @click="() => positCount()" class="btn-positive" type="button">+</button>
  </div>
</template>

<script>
  import { mapActions } from 'vuex';

  export default {
    computed: {
      count() {
        return this.$store.state.count;
      },
    },
    methods: {
      ...mapActions([
        'positCount',
        'negativeCount',
      ]),
    },
  };
</script>
5
  • Большое спасибо) 15 июл 2021 в 17:48
  • @salco202020, пожалуйста. Вопросов нет, понятны принцип деструктуризации и причина использования стрелочных функций в шаблоне?
    – yar85
    15 июл 2021 в 17:52
  • вроде как да, мы вызываем ее. Правда я сделал немного по другому, создал 2 метода и в самих методах вызвал через this.positCount() , лично мне так более удобно, в плане понимания кода) Благодарю за помощь! 15 июл 2021 в 18:02
  • @salco202020, не потому что "вызываем" - вот так @click="positCount" тоже работало бы... но работало бы иначе: с нежелательным эффектом передачи Event-инстанса в действие payload'ом :) Метод для избавления от такой бяки это тоже нормальное решение, конечно. Еще можно и @click="positCount()", вью по идее выполнит что-то типа .bind запомнив что обработчик надо без аргумента вызывать, но такая запись выглядит неоднозначно для js-программиста (будто мы результат вызова используем, хотя на самом деле нет).
    – yar85
    15 июл 2021 в 18:08
  • Благодарю за разъяснение) Но, моих знаний пока не достаточно чтоб осознать все написанное)) 15 июл 2021 в 18:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.