Изменение состояния Vuex не обновляет Vue в сети

Question

Я очень новичок в Vue и у меня проблемы с существующим кодом. Я вычислил свойства моих объектов Vuex

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

В моем Store.js я добавляю новый объект в мой массив, но Vue не обновляется. Обратите внимание, что js вставляет дочерний объект

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)
}

При вызове addNew json корректно обновляется с данными

Выбранный получатель объекта, как показано ниже

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
}
}

Пожалуйста, помогите

Answer 1

Свяжите свои данные с вашим состоянием, используя ... mapState, и когда вы измените состояние, оно автоматически обновится.

Answer 2

Это проблема реактивности Vue.Это срабатывает только если объект изменен.В вашем случае state.currentObject все еще указывает на старую ссылку.

Вы можете использовать JSON.parse(JSON.stringify()) для создания глубокой копии:

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))

Обновлено: Ваш получатель зависит от state.currentPainting, а не state.currentObject Яне уверен, что отличается между state.currentObject и state.currentPainting, но вам нужно изменить state.currentPainting, чтобы ваш геттер перезапустился.