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

Question

我努力在创建对象的默认属性和保留它们之间找到正确的平衡 'reactive'。重要说明我正在为我的商店使用 Vuex。

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

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

举一个很好的例子来说明我的问题：

在我的 'store' 中，我有产品 (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 某处

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive.

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 中创建反应性（默认）属性的正确方法是什么？

What is the right way to create reactivity (default) properties in Vuejs/Vuex?

arrays

vue.js

vuex