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

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

在这里，我预计状态会发生变化，这确实发生了，但同时它失去了反应性。突然之间，所有依赖于这个状态的东西都没有变化检测了。