Как добавить новое значение в состояние через мутации?

Question

У меня есть этот код:

export default new Vuex.Store({
    state: {
     bottles: 20,
     disabledBtn: false
    },
mutations: {
REMOVE_BOTTLES(state) {
  if (state.bottles > 0) {
    state.bottles--;
  }
},

ADD_BOTTLES(state, items) {
  state.bottles = state.bottles + items
  }   
},
actions: {
removeOneBottle ({commit}) {
  commit('REMOVE_BOTTLES');
},
addBottlesInput ({commit}, items) {
  commit('ADD_BOTTLES', items);
  }
 }
})

Мне нужно добавить новое добавленное значение в состояние. Здесь, в мутациях, он просто добавляется как строка, но мне он нужен для добавления чисел, прошедших через ввод. Буду признателен за любой ответ.

Answer 1

Предполагая, что ваша проблема заключается в том, что items является строкой вместо числа, попробуйте изменить мутацию ADD_BOTTLES на

ADD_BOTTLES (state, items) {
  let num = parseInt(items, 10)
  if (!isNaN(num)) {
    state.bottles += items
  }
}

Если вы получаете значение от пользователя через форму, рассмотрите возможность использования модификатора .number. Например (на основе вашего скриншота) ...

<template>
  <section>
    <p>How many bottles are there in total:</p>
    <p>{{ bottles }}</p>
  </section>
  <section>
    <p>How many bottles of water were brought?</p>
    <input type="number" v-model.number="items" min="0">
    <button @click="addBottles(items)">Add</button>
  </section>
</template>

import { mapState, mapMutations } from 'vuex'

export default {
  data: () => ({ items: 0 }),
  computed: mapState(['bottles']),
  methods: mapMutations({
    addBottles: 'ADD_BOTTLES'
  })
}