在 nedb 中添加的记录是单一的，但为啥 VUE 会多次存储相同的记录？

Posted 2023-03-22

【中文标题】在 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 方法并将其移到方法之外。这真的很容易被忽视。