时间戳

首页 > 解决方案 > Vuex 状态更改不会刷新 Vue on Web

vue.js - Vuex 状态更改不会刷新 Vue on Web

问题描述

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

请帮忙

标签： vue.jsvuex

解决方案

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

推荐阅读