Блог

Чтобы создать новую запись, я определяю объект записи в функции компонентов data() и привязываю его к полям формы с помощью v-model . Этот объект затем передается действию Vuex, которое отправляет новую запись на серверную часть, а затем отправляет объект соответствующему мутатору.

Проблема в том, что при внесении изменений в исходный объект, определенный в data (), они, по-видимому, каскадируются в объект, который был помещен в хранилище.

Я понимаю концепцию передачи по ссылке, но, похоже, на этот шаблон не следует влиять. Есть ли лучший шаблон для использования при создании новой записи БД?

Добавить запись Vue

 lt;v-text-field  v-model="newRecord.name" /gt; ... export default {  data() {  return {  newRecord: {}  }  } } ... methods: {  addRecord(){  this.addRecordAction(this.newRecord)  ...  this.newRecord.name = 'new name' // lt;== reflects in vuex store!  } }  

Магазин записей Vuex

 async addRecordAction({commit}, newRecord){  const response = await axios.post('/api/record', newRecord)  newRecord = response.data // contains record's new ID  commit('addRecordMutation', newRecord) } ... addRecordMutation: (state, newRecord) =gt; (state.records.push(newRecord))  

Поскольку ваше действие добавления является асинхронным, this.newRecord.name = «новое имя», вероятно, выполняется до операции добавления, и, следовательно, поскольку вы передали ссылку, добавляемый объект имеет новое имя.

Самое простое решение «дождаться» добавления записи перед установкой имени.