arctic07
@arctic07

Как правильно добавить объект в стор?

Есть форма, 3 поля текстовые. Задача - добавить из них инфу в объект, и этот объект добавить в массив, который лежит в сторе.
Как я делаю добавление:
submit по форме. Объект собирается в объект vehicle из полей v-model.
<form @submit.prevent="submit">
        <input
          type="text"
          placeholder="Name"
          v-model="vehicle.name"
        />
        <input
          type="text"
          placeholder="Description"
          v-model="vehicle.description"
        />
          <input
            id="rentInput"
            type="text"
            placeholder="Rent price"
            v-model="vehicle.rent"
          />
        </div>
        <button type="submit" :class="$style.modalSubmit">Complete</button>
      </form>


data: () => ({
    vehicle: {
      name: '',
      description: '',
      rent: '',
      type: 'custom'
    }
  }),


methods: {
    submit() {
      this.$store.commit("vehicles/addVehicle", this.vehicle);
    },
}


@store/vehicles.js
export const state = () => ({
  vehicles: [],
});

export const mutations = {
addVehicle(state, payload) {
    let vehicles = state.vehicles.concat(payload);
    state.vehicles = vehicles;
  },
};

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

Error: [vuex] do not mutate vuex store state outside mutation handlers.

Я нашел решение данной проблемы в документации: https://vuex.vuejs.org/guide/forms.html
но не могу понять как применить примеры что они дают на мой код... ?
  • Вопрос задан
  • 68 просмотров
Пригласить эксперта
Ответы на вопрос 1
0xD34F
@0xD34F Куратор тега Vue.js
Error: [vuex] do not mutate vuex store state outside mutation handlers.

Ну да, как и должно быть. Вы же помещаете в массив, находящийся в хранилище, ссылку на объект, с которым работаете в компоненте с формой.

Делайте копию:

this.$store.commit('vehicles/addVehicle', { ...this.vehicle });
// или
addVehicle: (state, payload) => state.vehicles.push({ ...payload }),
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
27 окт. 2020, в 15:42
1000 руб./в час
27 окт. 2020, в 15:30
100000 руб./за проект
27 окт. 2020, в 15:28
100000 руб./за проект