Vuex 상태를 업데이트하면 LokiJS 데이터도 변경됩니다. 이유가 무엇입니까?Vuex / LokiJs

Vuex 상태를 업데이트하면 LokiJS 데이터도 변경됩니다. 이유가 무엇입니까?Vuex / LokiJs

앱 워크플로우는 API 백엔드에서 데이터를 가져와 LokiJs의 도움을 받아 클라이언트 스토리지에 씁니다.고객 컬렉션에는 수천 개의 데이터가 있습니다.앱 상태 관리를 위해 Vuex를 사용합니다.

그리고 여기에 문제가 있다.Vuex 상태를 변경하면 LokiJS 스토리지의 데이터도 변경됩니다.어떻게 하면 피할 수 있을까요?

LS(lokijs 스토리지)에서 사용자를 가져오는 Vuex 액션이 있다.

getStudentByClass({ state, commit }) {
  const stds = students.collection.find({ class_id: state.classId });
  commit('setStudents', stds);
}

selectStudent(state, index) {
  const student = state.students[index];
  Vue.set(student, 'selected', !student.selected);
}

및 Vuex 돌연변이

setStudents(state, students) {
   state.students = students
}

상기와 같이selectStudentVuex 스토어에서 학생이 선택한 속성을 변경하지만 LS에서도 변경됩니다.

원본 LS 데이터는 다음과 같습니다.

$loki: 63
class_id: 5
color: "green"
id: 248
meta: Object
name: "John Doe"
point: 100
teacher: 0
updated_at: "2017-01-24 10:00:34"
username: "johdoe"

LS 데이터 변경

$loki: (...)
class_id: (...)
color: (...)
id: (...)
meta: (...)
name: (...)
point: (...)
selected: true <--------------- here
teacher: (...)
updated_at: (...)
username: (...)
__ob__: Observer
get $loki: function reactiveGetter()
set $loki: function reactiveSetter(newVal)
// skipped

개체는 JS에서 참조로 전달되므로 vuex에서 변경하면 loki에서도 변경됩니다.특이한 점은 없어요.

원하지 않으면 다음과 같은 패키지를 사용해야 합니다.clone-deepvuex에 전달하기 전에 loki의 결과를 복제합니다(로다시는 사용하는 경우에도 이와 같은 기능이 있습니다).

언급URL : https://stackoverflow.com/questions/42727331/updating-vuex-state-changes-lokijs-data-too-why-vuex-lokijs