计算/异步数据获取答案

【问题标题】：Computed / async data fetching计算/异步数据获取
【发布时间】：2018-12-23 23:19:25
【问题描述】：

我正在尝试创建简单的 Vue + CouchDB 应用程序。使用 Vanilla JS，这可以正常工作，但我没有使用 promise 或异步函数从数据库中获取数据到我的 vue 实例。这是我的代码：

app.html

<div id="vue-app">
  <table>
    <thead>
      <tr>
        <th>{{ tableHead.name }}</th>
        <th>{{ tableHead.lastname }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="data in tableData">
        <td>{{ data.name }}</td>
        <td>{{ data.lastname }}</td>
      </tr>
    </tbody>
  </table>
</div>

app.js

const db = new PouchDB('testdb')

const couch = {
  fetchData: async function () {
    var dbData = await db.allDocs({
        include_docs: true,
        descending: true
    }).then(function (result) {
        var objects = {}
        result.rows.forEach(function (data) {
            objects[data.id] = data.doc
        })
        return objects
    }).catch(function(err) {        
        return err
    })
    return dbData
  }
}

var app = new Vue({
    el: '#vue-app',
    data: {
        tableHead: {
            name: 'Name',
            lastname: 'Lastname'
        }
    },
    computed: {
        async tableData () {
            var dbData = await fetchData()
            return dbData
        }
    }
})

希望你能教我正确的方法来获取我的数据到我的 Vue 实例！

【问题讨论】：

标签： javascript json vue.js couchdb pouchdb

【解决方案1】：

欢迎来到 SO！

计算属性并不意味着异步。

解决数据异步检索的常用模式是：

使用内部 data 占位符
在组件生命周期挂钩created 或mounted 上发起异步请求
请求成功后，使用新内容更新内部data。
在您的模板中使用内部data。

在你的情况下，你会：

将您的tableData 变成内部data，就像您的tableHead
在 created 挂钩中调用您的 couch.fetchData 函数。
在返回 Promise then 链的函数中（或等待后），将结果分配给您的 tableData
在您的模板中使用tableData（无需更改）

例如查看 Vue cookbook to consume APIs with Axios

【讨论】：