Vuex getter 및 돌연변이 이해

Vuex getter 및 돌연변이 이해

예를 들어, 제가 이런 vuex 가게를 가지고 있다고 가정해보죠.

state: {
  docs: null, 
  adds: [],
  deletes: [],
},
actions: {
  // initialize docs to an array of objects
  init (context, payload) {
  }
}
getters: {
  // get the docs plus the adds, minus the deletes
  docs (state) {
  }
},
mutations: {
  // add a doc, keeping track that it was added
  addDoc (state, payload) {
  }
  // remove a doc, keeping track that it was deleted
  removeDoc (state, payload) {
  }
}

저는 세터의 문서 배열을 변형하거나 게터의 배열의 유효 값을 계산하는 두 가지 선택지가 있다고 생각합니다.이러한 아이디어 중 하나가 반응성이나 성능 면에서 다른 아이디어보다 훨씬 더 나쁜가요?

즉, 다음과 같습니다.

// choice 1: really mutate the docs
addDoc (state, payload) {
  state.adds = [...state.adds, ...payload]
  state.docs = _.without([...state.docs, ...payload], state.deletes)
}

// choice 2: mutate the docs in effect, via the getter
addDoc (state, payload) {
  state.adds = [...state.adds, ...payload]
}

// choice 2, in getter
docs(state) {
  return _.without([...state.docs, ...payload], state.deletes)
}

돌연변이가 자주 발생하지 않고 게터가 자주 호출된다고 가정하면, 제가 선택 2로 계산 페널티를 지불하는 것입니까?또는 더 나은 결과가 캐시되니까(내 생각에는?) 두 가지 접근 방식이 정말로 거의 동일합니까?어느 쪽으로 가야 할지에 대한 동전 던지기인가요, 아니면 제가 결정할 수 있는 원금이 있나요? -- 감사합니다.

네, 게터는 캐시됩니다.그래서 이 경우에는 동전 하나만 던져도 될 것 같습니다.개인적으로, 저는 컴퓨터를 하는 것을 더 좋아합니다.

언급URL : https://stackoverflow.com/questions/55442611/understanding-vuex-getters-and-mutations