Как из компонента обновлять объект в хранилище?

Question

[alaskafx]

Задача: изменения с input(range) отправлять в разные ключ:значение в хранилище Vuex, но дело в том, что там было всё распределено по объектам, и input был не один.

Стэйт хранилища:

state: {
CarSetup: {
      wheels: 0,
      color: 0,
      sim: 0,
    },
}

Компонент с инпутами:

data(){
  return{
     rangeValues: {
        wheels: 0,
        color: 0,
        sim: 0
      },
  }
},

computed: {
    returnValue() {
      return { ...this.rangeValues };
    },
},

watch:{
    returnValue(newValue, oldValue) {
      if(newValue.wheels!= oldValue.wheels){
        this.$store.commit('setCarInfo', {to: 'wheels', value: newValue.wheels})
      }
      if(newValue.color!= oldValue.color){
        this.$store.commit('setCarInfo', {to: 'color', value: newValue.color})
      }
      if(newValue.sim!= oldValue.sim){
        this.$store.commit('setCarInfo', {to: 'sim', value: newValue.sim})
      }
    },
}

Мутация:

mutations: {
    setCarInfo(store, v){
      store.CarSetup[v.to] = v.value
    },
  },

Хочу узнать:
Является ли этот способ "не костылём"?
Есть ли способы лучше?

Comments

[Aetae]

А нахрена, спрашивается, ты всё так усложнил?

Answer 1

[0xD34F]

Когда в хранилище появится новое свойство, будете вручную его добавлять в компонент? Хранилище доступно в data (если, конечно, не будете делать её стрелочной), так что можно просто скопировать объект; в наблюдателе вместо проверок конкретных свойств можно сделать цикл по всем:

rangeValues: { ...this.$store.state.CarSetup },

Object.entries(newValue).forEach(([ k, v ]) => {
  if (v !== oldValue[k]) {
    this.$store.commit('setCarInfo', { to: k, value: v });
  }
});

А вообще, не надо ни копии объекта из хранилища, ни наблюдателя. Вырезаете returnValue, свойство rangeValues из обычного делаете вычисляемым:

computed: {
  rangeValues() {
    return new Proxy(this.$store.state.carSetup, {
      set: (target, key, val) => {
        this.$store.commit('setCarInfo', { [key]: val });
        return true;
      },
    });
  },
},

Мутацию переписываете следующим образом:

setCarInfo: (state, payload) => Object.assign(state.carSetup, payload),

Comments

[alaskafx]

Переписал код, но выдаёт ошибку в консоль:

[Vue warn]: Computed property "rangeValues" was assigned to but it has no setter.

[0xD34F]

alaskafx, да ну? А у меня не выдаёт.

[alaskafx]

0xD34F, Может ли быть дело в самих инпутах?

<input
            type="range"
            step="0.1"
            min="-1"
            max="1"
            v-model="rangeValues"
          />

[0xD34F]

alaskafx, убил бы.

Чем является rangeValues? А что в качестве значения принимает (в смысле - должен принимать) input? Если что, речь про типы данных.

[alaskafx]

0xD34F, В этом примере input принимает значения от -1 до 1.
rangeValues - является компьютед свойством..

Всё же, извините, но еще не понял

[0xD34F]

alaskafx, а я не понял, что вы сейчас сказали. Попробуйте ещё раз.

[alaskafx]

0xD34F, есть несколько инпутов(с типом range), которые должны изменять n значения в объекте стэйта, в хранилище.

В вашем примере, который я переписал - компьютед играет роль для установки n значений в объект хранилища

[0xD34F]

alaskafx, я не об этом спрашивал.

Слов, вижу, вы совсем не понимаете. Так что их больше не будет. Вот вам ваши инпуты - смотрите, думайте.