An Electron & Vue.js quick start boilerplate with vue-cli scaffolding, common Vue plugins, electron-packager/electron-builder, unit/e2e testing, vue-devtools, and webpack.
# I have a modal component that emits a store action on submit with a specific payload. The modal is used to create new items in a list or edit existing ones. Payload includes a property payload.myItem.id which is an empty string for new items. The action calls a mutation which is supposed to assign a new ID and push a new object to a store array if payload.myItem.id is empty or update an existing object if it's not empty. If you take a look at the console.logs() and the output in the console, you'll see that payload.myItem.id which was empty before the mutation, has an ID in the console.log('start mutation', payload.myItem.id)before the command to assign a new ID. The weird thing is that the terminal logs don't match the console and show correct values. How is that possible? And how do I make Vue use the correct value?
Here are some code snippets:
// Modal component save function
handleModalSave() {
let payload = {
layerId: this.layer.id,
myItem: {
id: this.editLayerForm.id,
text: this.editLayerForm.text
}
}
console.log('save', payload.myItem.id)
this.$store.dispatch('saveLayerItem', payload)
}
// Store action
saveLayerItem: ({ commit }, payload) => {
console.log('action payload', payload)
commit('SAVE_LAYER_ITEM', payload)
}
// Store mutation
SAVE_LAYER_ITEM: (state, payload) => {
console.log('mutation start', payload.myItem.id)
let layer = state.map.layers.find(layer => layer.id === payload.layerId)
if (payload.myItem.id !== '') {
// For existing items
let itemIdx = layer.items.findIndex(item => item.id === payload.myItem.id)
Vue.set(layer.items, itemIdx, payload.myItem)
} else {
// For new items
payload.myItem.id = guid()
layer.items.push(payload.myItem)
}
console.log('mutation end', payload.myItem.id)
}
If visual, provide a screenshot.
# Here are two screenshots of 1) the console logs and 2) the corresponding terminal logs:
I removed both, the createPersistedState() as well as the createSharedMutations() plugin and added this line to main.js: window.localStorage.clear().
And now it's finally working.
Describe the issue / bug.
# I have a modal component that emits a store action on submit with a specific payload. The modal is used to create new items in a list or edit existing ones. Payload includes a property
payload.myItem.id
which is an empty string for new items. The action calls a mutation which is supposed to assign a new ID and push a new object to a store array ifpayload.myItem.id
is empty or update an existing object if it's not empty. If you take a look at the console.logs() and the output in the console, you'll see thatpayload.myItem.id
which was empty before the mutation, has an ID in theconsole.log('start mutation', payload.myItem.id)
before the command to assign a new ID. The weird thing is that the terminal logs don't match the console and show correct values. How is that possible? And how do I make Vue use the correct value? Here are some code snippets:If visual, provide a screenshot.
# Here are two screenshots of 1) the console logs and 2) the corresponding terminal logs:
Tell me about your development environment.