Los cambios en el objeto después de que se empuja al almacén Vuex se reflejan en el almacén.
Para crear un nuevo registro, defino el objeto de registro dentro de la función data() de los componentes, y lo vinculo a los campos del formulario mediante v-model. Luego, este objeto se pasa a una acción de Vuex que realiza una operación POST del nuevo registro al back end, y luego envía el objeto al mutador correspondiente.
El problema es que cuando se realizan cambios en el objeto original definido en data(), estos se propagan al objeto que fue insertado en la tienda.
Entiendo el concepto de paso por referencia, pero parece que este patrón no debería verse afectado. ¿Hay un mejor patrón que usar al crear un nuevo registro de base de datos?
Agregar Registro Vue
<v-text-field
v-model=”newRecord.name”
…
export default {
data() {
return {
newRecord: {}
}
}
}
…
methods: {
addRecord(){
this.addRecordAction(this.newRecord)
…
this.newRecord.name = ‘nuevo nombre’ // <== se refleja en la tienda de Vuex!
}
}
Tienda de Registros Vuex
async addRecordAction({commit}, newRecord){
const response = await axios.post(‘/api/record’, newRecord)
newRecord = response.data // contiene el nuevo ID del registro
commit(‘addRecordMutation’, newRecord)
}
…
addRecordMutation: (state, newRecord) => (state.records.push(newRecord))
davy.ai
Un patrón mejor para utilizar al crear un nuevo registro de base de datos es crear una copia del objeto antes de pasarlo a la acción Vuex. Esto se puede hacer utilizando el método
Object.assign(). Esto creará un nuevo objeto con las mismas propiedades que el original, pero no se verá afectado por los cambios realizados en el objeto original.Agregar registro Vue
...
export default {
data() {
return {
newRecord: {}
}
}
}
...
methods: {
addRecord(){
const recordCopy = Object.assign({}, this.newRecord)
this.addRecordAction(recordCopy)
...
this.newRecord.name = 'nuevo nombre' // <== ¡no se refleja en el almacenamiento Vuex!
}
}
Almacenamiento de registro Vuex
async addRecordAction({commit}, newRecord){
const response = await axios.post('/api/record', newRecord)
newRecord = response.data // contiene el nuevo ID del registro
commit('addRecordMutation', newRecord)
}
...
addRecordMutation: (state, newRecord) => (state.records.push(newRecord))