在 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 会多次存储相同的记录?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 vue.js 中通过 NeDB 的“返回”获取结果

Electron-Vue中操作本地数据库NeDB

尝试让 nedb 导入 Svelte 组件

NEDB & Nodejs:使用用户输入在 home.db 中搜索特定记录 - 无法将参数传递给 index.js

Vue.js 依赖注入

Nedb 多集合单数据存储