vue.js - script - VueJS & VUEX: acortar el código JS

vue title attribute

Question

Me encanta el código limpio y simple.

Así que me gusta acortar estas líneas de JavaScript para que no parezcan tan desordenadas.

Mi código vuex-mutación:

editEvent(state) {
if (
state.form.time !== '''' &&
state.form.date !== '''' &&
state.form.event !== '''' &&
state.form.artist !== '''' &&
state.form.organizer !== '''' &&
state.form.location !== ''''
) {
const event = {
time: state.form.time,
date: state.form.date,
event: state.form.event,
artist: state.form.artist,
organizer: state.form.organizer,
location: state.form.location
}
events.child(state.currentEventKey).update(event)
state.form.time = ''''
state.form.date = ''''
state.form.event = ''''
state.form.artist = ''''
state.form.organizer = ''''
state.form.location = ''''
state.currentEventKey = null
state.showForm = false
}
}

y aquí otro:

populateEventForm(state, payload) {
state.form.time = payload.event.time
state.form.date = payload.event.date
state.form.event = payload.event.event
state.form.artist = payload.event.artist
state.form.organizer = payload.event.organizer
state.form.location = payload.event.location
state.currentEventKey = payload.key
state.showForm = true
}

¿Cómo puedo mejorar esto?! ??

Answer 1

Esto es pseudo código en su mayor parte. En algún lugar, almacene sus propiedades comunes.

const props = ["time", "date", "event", "artist", "organizer", "location"]

Luego usa eso en tus funciones.

function editEvent(state) {
// check to see if every property exists on the state
if (!props.every(p => state.form[p] !== '''')) return
// build the event object
const event = props.reduce((acc, p) => acc[p] = state.form[p], {})
// I don''t know where "events" comes from-- I left this alone
events.child(state.currentEventKey).update(event)
// clear each property
props.forEach(p => state.form[p] = '''')
// clear your misc. props
state.currentEventKey = null
state.showForm = false
}
function populateEventForm(state, payload) {
props.forEach(p => state.form[p] = payload.event[p])
state.currentEventKey = payload.key
state.showForm = true
}

Tenga en cuenta que, como ha publicado esto como una pregunta de Vue / Vuex, es posible que deba usar Vue.set en lugar de un indexador en casos como el objeto de event que se está creando . Es difícil para mí contar por el código limitado que publicaste. En ese caso, sería algo así como

const event = props.reduce((acc, p) => {
Vue.set(acc, p, state.form[p])
return acc
}, {})