在 nedb 中添加的记录是单一的,但为啥 VUE 会多次存储相同的记录?
Posted
技术标签:
【中文标题】在 nedb 中添加的记录是单一的,但为啥 VUE 会多次存储相同的记录?【英文标题】:Record added in nedb is single but why VUE store same record multiple times?在 nedb 中添加的记录是单一的,但为什么 VUE 会多次存储相同的记录? 【发布时间】:2020-09-11 18:38:15 【问题描述】:我在 Vue 中使用电子。我正在使用 nedb 保存数据。我将事件从 vue 组件发送到 background.js,当它返回数据时,它会在 fibbonaccicaly 的 vuex 中添加数据。 喜欢
如果我添加 1 个对象,比如说 A,那么 vuex 存储 1 个对象
如果我再添加 1 个对象,比如说 B,那么 vuex 存储总共有 3 个 对象(A 为 1,B 为 2);等等。
所以我只需要在 vuex 中插入一次数据。我是怎么做到的?
// 在 CreateNewTodo.vue 中
methods:
// saveTodo method get triggers when user submit the form in modal
saveTodo()
if (this.isFormValid)
const newTodo =
task: this.task,
priority: this.priority,
eventDate: this.eventDate,
createdDate: new Date(),
completedDate: null,
isCompleted: false,
;
// new Todo is an object that contains data that is requested from user
// from a form like task, priority and eventDate
ipcRenderer.send('createNewTodo', newTodo);
ipcRenderer.on('createNewTodoResponse', (e, newDoc) =>
if (typeof newDoc === 'object')
this.$store.dispatch('createNewTodo', newDoc);
$('#createNewModal').modal('hide');
else
$('#createNewModal').modal('hide');
);
,
// 在 background.js 中
ipcMain.on('createNewTodo', (e, args) =>
// db.performTask is a function that insert document/record in nedb.
// I've used nedb-promises. In return we'll get promise.
const dbpromise = db.performTask('todos', 'insert', args);
// newDoc is the newly inserted document, including its _id
dbpromise.then((newDoc) =>
e.sender.send('createNewTodoResponse', newDoc);
)
.catch(() =>
e.sender.send('createNewTodoResponse', 'error');
);
);
// vuex 商店
const state =
todos: [],
;
const getters =
getAllTodos(todosState)
return todosState.todos;
,
;
const mutations =
CREATE_NEW_TODO(todosState, todo)
todosState.todos.push(todo);
,
;
const actions =
createNewTodo( commit , todo)
commit('CREATE_NEW_TODO', todo);
,
;
【问题讨论】:
问题是什么? 我想每条记录只在 vuex 存储中插入一次数据。我的意思是如果我们第一次插入数据,那么它会在 VUEX 存储中添加一次。所以总记录将为 1 如果我们插入第二条记录,那么数据将被插入 2 次。所以总记录将为 3 如果我们插入第三条记录,则数据被插入 3 次,那么总记录将为 6 但上面的代码没有这样做。不知道bug在哪里? 但是代码在做什么呢?createNewTodoResponse
中的 data
是一个数组还是其他东西。如果它是一个数组,你必须确保你推送所有元素而不是它自己的数组。
当我们在 nedb 的数据库中插入一条记录时,我们将插入的记录/文档作为响应返回。 data 是我们插入的记录/文档。
@dreijntjens 代码已更新。我只是一个新手,请原谅我的命名约定不好。
【参考方案1】:
每次保存待办事项时,都会为 IPC 回复通道注册一个新侦听器。侦听器都保持活跃状态,每个侦听器都选择并处理每个事件。这不是你想要的,你只想处理每个响应一次,并且电子有一个方法:) 试试这个:
// register a listener to process the response (once)
ipcRenderer.once('createNewTodoResponse', (e, newDoc) =>
if (typeof newDoc === 'object')
this.$store.dispatch('createNewTodo', newDoc);
$('#createNewModal').modal('hide');
else
$('#createNewModal').modal('hide');
);
// send the request
ipcRenderer.send('createNewTodo', newTodo);
【讨论】:
这不是一个愚蠢的错误,一点也不 :) 您也可以保留ipcRender.on
方法并将其移到方法之外。这真的很容易被忽视。以上是关于在 nedb 中添加的记录是单一的,但为啥 VUE 会多次存储相同的记录?的主要内容,如果未能解决你的问题,请参考以下文章