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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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