Question

我已经在nedb之后运行Vue和Electron的安装程序中安装了this guide。设置数据库时没有出现任何错误，并且一切似乎在存储方面都是明智的。

我在显示文档内容时遇到了麻烦。我可能会误会该怎么做。

我现在做的方式是，我首先在Vue中使用了名为savePreset()的测试方法。它只是创建一个文档，然后使用nedb自述文件中的以下代码将其插入数据库：

savePreset(){
        var doc = { hello: 'world'
               , n: 5
               , today: new Date()
               , nedbIsAwesome: true
               , notthere: null
               , notToBeSaved: undefined  // Will not be saved
               , fruits: [ 'apple', 'orange', 'pear' ]
               , infos: { name: 'nedb' }
               };
          this.$db.insert(doc, function (err, newDoc) {   // Callback is optional
            // newDoc is the newly inserted document, including its _id
            // newDoc has no key called notToBeSaved since its value was undefined
            if (err) {
              console.log(err);
            } else {
              console.log(newDoc)
            }
          });
      }

调用此方法时，newDoc已记录到控制台，因此插入工作正常。然后，我尝试输出文档的内容，以便最终遍历该文档并为文档中的每个项目创建一个元素。我尝试使用计算属性来做到这一点，例如：

getDB(){
        return this.$db.find({ hello: 'world' }, function (err, docs) {
          // docs is an array containing documents Mars, Earth, Jupiter
          // If no document is found, docs is equal to []
          return docs
        });
      }

但是，这样做时getDB是undefined。当我在同一函数中尝试console.log(docs)时，它会记录一个数组，其中包含我用savePreset方法添加的对象。因此，似乎可以通过将其记录在函数中来获取文档，但是当我尝试使用{{getDB}}输出属性时，前端没有任何显示。

我怀疑我必须采用另一种方式。有什么想法吗？

Answer 1

无需承诺或async / await。您可以在$db.insert回调中简单地设置本地数据属性（事先将其转换为箭头功能以保留上下文）：

// script
export default {
  data() {
    return {
      doc: null, 
    }
  },
  methods: {
    savePreset() {
      ...
      this.$db.insert(doc, (err, newDoc) => {
        if (err) {
          console.log(err)
        } else {
          console.log(newDoc)

          this.doc = newDoc 
        }
      })
    }
  }
}

//template
<ul>
  <li v-for="(val, key) in doc" v-if="val">{{key}}: {{val}}</li>
</ul>

使用doc作为计算属性（Vue，nedb，Electron）

1 个答案: