[Vuejs]-Vuex state change doe not refresh the Vue on Web

by

0👍

It’s Vue reactivity problem. It’s only triggered if object is changed. In your case, state.currentObject is still point to old reference.

You can use JSON.parse(JSON.stringify()) to make a deep copy:

state.currentObject.paintings.push({
  'config': {
    'formName': 'My New Picture',
    'orientation': 'portrait',
    'referenceNumber': '',
    'formType': ''
  },
  'id': (+new Date()),
  'containers': [
    {
      'id': 'page-0',
      'type': 'paintContainer',
      'name': 'Page',
      'image': '',
      'children': []
    }
  ]
})
state.currentObject = JSON.parse(JSON.stringify(state.currentObject))
state.currentPainting = state.currentForm.paintings[state.currentForm.paintings.length-1]
state.currentPainting = JSON.parse(JSON.stringify(state.currentPainting))

Updated:
Your getter depends on state.currentPainting, not state.currentObject
I’m not sure what’s different between state.currentObject and state.currentPainting, but you need to change state.currentPainting to make your getter re-run.

0👍

Bind your the data with you state using the …mapState and when ever you changes the state the will update automatically.

Leave a comment