Vuejs/Vuex에서 반응성(기본값) 속성을 만드는 올바른 방법은 무엇입니까?

Vuejs/Vuex에서 반응성(기본값) 속성을 만드는 올바른 방법은 무엇입니까?

나는 객체의 기본 속성을 만드는 것과 그것들을 '반응적'으로 유지하는 것 사이의 올바른 균형을 찾기 위해 고군분투하고 있습니다.중요한 참고: 저는 Vuex를 제 가게에 사용하고 있습니다.

이미 확인했습니다: https://v2.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)
        }
      }
    })
  }
}

보시다시피 제품에 연락처 배열이 있는지 확인하고 없으면 배열을 만듭니다.이것이 올바른 방법입니까?또는 빈 배열 'childn'을 정의하여 연락처를 추가할 때와 같이 맨 처음에 빈 배열을 만드는 것이 더 타당합니까?

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

감사합니다!

간단한 대답: 예, 당신은 미리 그 주의 부동산을 언급할 필요가 있습니다.나중에 추가하면 확실히 속성이 추가되지만 사후 대응적이지는 않습니다.

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

가는 길입니다.

당신이 게시한 링크의 어딘가.

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

여기서 저는 실제로 일어난 일이지만 동시에 반응성을 상실한 상태가 바뀔 것으로 예상했습니다.그래서 갑자기 이 상태에 의존하는 모든 것에 대한 변화를 감지하지 못했습니다.

언급URL : https://stackoverflow.com/questions/41998509/what-is-the-right-way-to-create-reactivity-default-properties-in-vuejs-vuex