Как после добавления объекта в стор избежать ошибки «do not mutate vuex store state outside mutation handlers»?

Question

[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
Но не могу понять, как применить примеры, что они дают, в своём коде.

Answer 1

[0xD34F]

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 }),

Или заменяйте оригинал. Добавляете в компонент метод, создающий объект с дефолтными значениями свойств:

methods: {
  createNewVehicle: () => ({
    name: '',
    description: '',
    rent: '',
    type: 'custom',
  }),
  ...

Применяете его при создании объекта с данными экземпляра компонента и после вызова мутации:

data() {
  return {
    vehicle: this.createNewVehicle(),
  };
},

this.$store.commit('vehicles/addVehicle', this.vehicle);
this.vehicle = this.createNewVehicle();

Comments

[arctic07]

Спасибо!