VueJS从REST服务渲染数据

时间:2017-05-28 11:30:45

标签: asynchronous async-await vue.js vuex

我试图将数据从http请求呈现给工作正常的组件,问题是在获取数据时它是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'})
  }

1 个答案:

答案 0 :(得分: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>

通常,您需要显示一些微调器以向用户显示正在加载的内容......

希望这有帮助

编辑:忘记代码中的异步等待,你不需要在这里