我的应用程序工作流程正在从 API 后端获取一些数据,并在 LokiJS 的帮助下写入客户端存储。我在客户集合中有数千个数据。对于我的应用程序的状态管理,我使用 Vuex。
这就是问题所在。当我提交对我的 Vuex 状态的更改时,它也会更改我在 LokiJS 存储上的数据。我怎样才能避免这种情况?
我有 Vuex 操作从 LS(lokijs 存储)获取用户
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
}
如上图;使用selectStudent
功能,我在 Vuex 商店中更改了我的学生选择的属性,但在 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