Question

我努力在创建对象的默认属性和保持它们“被动”之间找到正确的平衡点。重要提示我正在为我的商店使用Vuex。

我已经检查过：https://vuejs.org/v2/guide/reactivity.html

然而，这似乎并没有完全回答我的问题。

举一个很好的问题例子：

在我的'商店'我有产品（json），包含联系人。在我的应用程序内部，某些时候新的联系人被添加到产品中。为此，我有一个动作。

const actions = {
  addContact: ({ commit }, payload) => {
    commit('ADD_CONTACT', payload)
  }
}

哪个叫突变。

const mutations = {
  'ADD_CONTACT' (state, payload) {
    var contact = {'id': payload.contact.contactId, 'gender': payload.contact.gender, 'firstName': payload.contact.firstName, 'initials': payload.contact.initials, 'lastName': payload.contact.lastName, 'middleName': payload.contact.middleName, 'birthDay': payload.contact.birthDay, 'childern': []}
    state.products.find(function (product) {
      if (product.id === payload.product_id) {
        if (product.contacts) {
          product.contacts.push(contact)
        } else {
          Vue.set(product, 'contacts', [])
          product.contacts.push(contact)
        }
      }
    })
  }
}

如您所见，我检查产品是否有联系人数组，如果没有我创建数组。这是正确的方法吗？或者首先创建一个空数组更有意义，例如通过定义一个空数组'childern'来添加联系人。

var contact = {'id': payload.contact.contactId, 'childern': []}

谢谢！

Answer 1

简短回答：是的，您需要事先提及州内的财产。稍后添加它们肯定会添加属性，但不会被激活。

var contact = {'id': payload.contact.contactId, 'childern': []}

是要走的路。

您发布的link某处

由于现代JavaScript的限制（以及放弃Object.observe），Vue无法检测属性添加或删除。由于Vue在实例初始化期间执行getter / setter转换过程，因此数据对象中必须存在一个属性，以便Vue转换它并使其具有反应性。

这同样适用于vuex商店。

仅供参考我曾经想将我的商店设置为默认状态，所以做了类似的事情：

// someModule.js Don't copy this, this doesn't set to default state.
const state = {      
  testProps: {
    prop1: [],
    prop2: null
  }
}

const defaultState = {      
  testProps: {
    prop1: [],
    prop2: null
  }
}

const mutations = {
  mutationToSetState: (state, payload) => {
     state.testProps = payload
  },
  mutationToResetState: (state) => {
     state = defaultState // Please don't do this ever
  }
}

在这里，我预计国家会发生变化，这确实发生了，但同时却失去了反应性。所以突然没有变化检测依赖于这种状态的一切。

在Vuejs / Vuex中创建反应（默认）属性的正确方法是什么？

1 个答案: