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的获取方法如下

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

这是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才能使getter重新运行。

Answer 2

使用... mapState使用状态绑定数据，无论何时更改状态，都会自动更新。

Vuex状态更改不会刷新Web上的Vue

2 个答案: