Как избежать автоматического обновления данных в store?

Question

[Figment]

Есть форма, в которой можно задать параметр "ширина". Форма должна срабатывать только при нажатии на кнопку. На деле происходит так, что после того, как мы один раз нажали на кнопку подтверждения и отправили данные в store, мы можем просто менять значение в поле input и данные в vuex сами начинают меняться.

<div class="row">
  <div class="col-md-12">
    <label for="namespace-width">Width:</label>
    <input id="namespace-width" type="number" placeholder="Width" v-model="namespaceSize.width" @change.prevent @input.prevent/>   
  </div>
   <div class="btn btn-success" @click="updateNamespacesSize()">Apply</div>
</div>

Как я понимаю, чтобы изменить данные в store, нам надо вызвать действие. Дело в том, что действие не вызывается и получается, что между данными установилась связь и срабатывает встроенное событие при изменении значения. Как это можно убрать?

data:

namespaceSize: {
  width: null,
  heigth: null, 
  length: null
},

method:

updateNamespacesSize() {
  return this.$store.dispatch('updateSize', {type: 'Namespace', size: this.namespaceSize})
},

Действие в store:

updateSize: (context, payload) => {
  return context.commit('updateSize', payload)
}

Мутация:

updateSize: (state, payload) => {
  console.log('update size')
  switch (payload.type) {
    case 'Namespace': return state.namespaces.forEach(namespace => { namespace.size = payload.size })
    case 'Class': return state.classes.forEach(clas => { clas.size = payload.size })
    case 'Method': return state.methods.forEach(method => { method.size = payload.size })
  }
}

С console.log пытался отследить ложное срабатывание функций и как раз получилось, что изменения происходят сами, после изменения параметра в поле ввода. Это на самом деле круто, но мне это не надо.

Answer 1

[0xD34F]

При присваивании или передаче в качестве параметра объект не копируется, копируется ссылка на него. Так что у вас в сторе оказывается тот же объект (в смысле - ссылка на тот же объект), что и в компоненте с формой.

Когда кидаете объект в стор, делайте копию. Типа, не size: this.namespaceSize, а size: { ...this.namespaceSize }. Или внутри стора копируйте, в мутации.

Comments

[Figment]

Спасибо большое, работает.