VueJS 从 REST 服务渲染数据

Question

我试图将来自 http 请求的数据呈现给工作正常的组件，问题是在获取数据时它为 null。当数据为 null 时，控制台会抛出 TypeError，直到所有数据都加载并提交到 Vuex 存储。

一切都按照我所怀疑的方式工作，我只是想弄清楚如何防止错误被抛出并等待所有适当的数据被获取。我见过其他人使用 v-if 来检查数据是否为空，这将起作用。这看起来很乏味，而且确实有更好的方法可以实现相同的结果，而无需应用程序充斥着检查每个状态的 v-if 语句。

我遇到了这个解决方案，但它仍然无法正常工作，我仍然收到相同的控制台错误。我是否正确使用了这些关键词，它们是否位于正确的位置？因为我尝试过的每一个变化都没有改变。

Vuex 动作：

const actions = {
  getThread ({ commit }, payload) {
    Vue.http
      .get(`http://localhost:9000/threads/${payload.id}`)
      .then(async response => {
        commit(FETCH_THREAD, await response.data)
      })
  }
}

这是在我的 vue 文件中调用的操作：

created () {
    this.$store.dispatch('getThread', {id: '59280ab5acbafb17af9da902'})
  }

Answer 1

我假设您正尝试在模板中显示商店中的某些内容。问题是，Vue 无法渲染尚不存在的东西。解决方案是检查数据是否存在。

让我们以这个组件为例：

<template>
    <div>
        {{ someObject.name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                someObject: null
            }
        },
        methods: {
            fetchTheObject () {
                this.someObject = {
                    id: 1,
                    name: 'My object'
                }
            }
        },
        created () {
            setTimeout( () => {
                this.fetchTheObject()
            }, 3000)
        }
    }
</script>

如您所见，您将在控制台中收到错误消息，因为 someObject.name 在调用 fetchTheObject() 之前不存在。

解决方案是放置一些 v-if 属性来控制：

<template>
    <div>
        <span v-if="someObject === null">Fetching the object</span>
        <span v-else>{{ someObject.name }}</span>
    </div>
</template>

通常，您会想要显示一些微调器以向用户显示某些内容正在加载...

希望对您有所帮助

编辑：忘记代码中的异步等待，这里不需要它

VueJS 从 REST 服务渲染数据

VueJS rendering data from REST service

asynchronous

async-await

vue.js

vuex