0

Почему в action не передается второй параметр? Если убрать первый параметр, то id передается и все работает. Как только ставлю два, то id = undefined.

С кнопками все понятно. Как быть с самим input? Пример который я нашел в документации не работает когда в action передаётся ещё и id. То есть, e.target.value = undefined. Без id работает нормально.

Component

<div class="quantity">
    <button @click="updateQuantity('increment', item.id)">+</button>
    <input type="number" :value="item.quantity">
    <button @click="updateQuantity('decrement', item.id)">-</button>
</div>

Action

updateQuantity: ({commit}, lalala, id) => {
    commit(lalala, id);
}

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

export default {

    namespaced: true,
    strict: true,

    state: {

        items: [

            {
                id: 0,
                quantity: 1
            },

            {
                id: 1,
                quantity: 1
            }

        ]

    },

    mutations: {

        add: (state, id) => {

            state.items.push(

                {
                    id,
                    quantity: 1
                }

            );

        },

        remove: (state, id) => {

            let index = state.items.findIndex(item => item.id === id);

            state.items.splice(index, 1);

        },

        increment: (state, id) => {

            let item = state.items.find(item => item.id === id);

            item.quantity++;

        },

        decrement: (state, id) => {

            let item = state.items.find(item => item.id === id);

            item.quantity--;

        },

    },

    actions: {

        addOrRemove: ({state, commit}, id) => {

            let item = state.items.find(item => item.id === id);

            if (!item) {
                commit('add', id);
            } else {
                commit('remove', id);
            }
        },

        updateQuantity: ({commit}, lalala, id) => {

            commit(lalala, id);

        }

    }

}

Component (Целиком)

    <template>
    <div class="mini-cart">
        <div class="item" v-for="item in items" :key="item.id">
            <div class="info">
                <div class="name">Товар {{ item.id }}</div>
                <div class="price">19.99 грн.</div>
            </div>
            <div class="quantity">
                <button @click="updateQuantity('increment', item.id)">+</button>
                <input type="number" :value="item.quantity">
                <button @click="updateQuantity('decrement', item.id)">-</button>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from 'vuex'

    export default {
        name: 'MiniCart',
        computed: {
            ...mapState({
                items: state => state.cart.items
            })
        },
        methods: {
            ...mapActions('cart', ['updateQuantity'])
        }
    }
</script>
3
  • Непонятно как выглядит метод updateQuantity в самом компоненте, но если вы пытаетесь дергать его напрямую из стора минуя специальный для этого метод dispatch, то это плохая идея
    – Adrug
    15 сен 2019 в 20:58
  • Так это нормально action никогда не принимал более одного значения, для этого группу значений объединяют в payload (нагрузка) и отправляют одним объектом. Но замечание выше верно, нужно вызвать метод и из него вызвать диспатч 15 сен 2019 в 21:04
  • @Adrug, добавил компонент. 15 сен 2019 в 21:14

1 ответ 1

0

Вот пример выполнения скрипта при объединении его в payload

new Vue({
  el: '#app',
  data: {
    item: {
      id: 1
    }
  },
  methods: {
    updateQuantity: function(lalala, id) {
      let payload = {
        lalala: lalala,
        id: id
      };
      //store.dispatch('updateQuantity', payload);
      console.log('вызов из стора updateQuantity c полезной нагрузкой');
      console.log({
        payload
      });
    }
  }

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="quantity">
    <button @click="updateQuantity('increment', item.id)">+</button>
    <input type="number" :value="item.quantity">
    <button @click="updateQuantity('decrement', item.id)">-</button>
  </div>
</div>

Ваш ответ

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

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