Vuex state change doe not refresh the Vue on Web

Question

I am very new to Vue and having trouble with existing code. I have computed properties of my Vuex objects

computed: {
...mapGetters([
  'selectedObject'
])
},

In my Store.js, I add a new object into my array but the Vue is not refreshed. Please note that the js is inserting a child object

addNew({ commit, state }, payload) {
  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.currentPainting = state.currentForm.paintings[state.currentForm.paintings.length-1]

  return FORM_SCHEMAS.update(state.currentSchemaId, state.currentForm)
}

On calling addNew, the json is updated correctly with data

The selectedObject getter is as below

selectedObject: state => {
  var data = state.currentForm; var formControl = null

  if (state.selectedControlType === 'container') {
    if (state.creatorMode === 'painting') {
      return state.currentPainting.containers.find(container => container.id === state.selectedControlId)
    }
  }

  return null
}
}

Please help

ittus ittus · Accepted Answer · 2019-05-08T08:59:48

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.

Vuex state change doe not refresh the Vue on Web

2 Answers