SimulatedGREG / electron-vue

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.
https://simulatedgreg.gitbooks.io/electron-vue/content/
MIT License
15.48k stars 1.55k forks source link

Terminal and Console show different values for vuex data #957

Closed yasto-121 closed 5 years ago

yasto-121 commented 5 years ago
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 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:

Screenshot 2019-11-27 at 22 37 13 Screenshot 2019-11-27 at 22 37 33
Tell me about your development environment.
yasto-121 commented 5 years ago

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.