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はインスタンスの初期化中にゲッター/セッター変換プロセスを実行するため、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 
    } 
} 

を私が実際に起こっている、状態が変化することが予想が、同時にそれはそのを失いました反応性。だから突然、この状態に依存しているすべてのものに対して変化の検出はありません。