Vuex 状态更改不会刷新 Vue on Web

Posted 2023-02-22

【中文标题】Vuex 状态更改不会刷新 Vue on Web

【英文标题】：Vuex state change doe not refresh the Vue on Web

【发布时间】：2019-09-25 22:45:17

【问题描述】：

我对 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 getter如下

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

请帮忙

【参考方案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 重新运行。

【讨论】：

那仍然行不通。我必须在网络上按 F5

这就是问题所在。 currentPainting 在 currentObject 中

【参考方案2】：

使用 ...mapState 将您的数据与您的状态绑定，当您更改状态时，它会自动更新。