vue-async-data 不工作

Question

我正在尝试使用 vue-async-data 在渲染我的 Vue 组件之前异步获取数据，但我没有成功。我没有收到任何错误，但它根本不起作用。

这是我的 ma​​in.js 代码：

import Vue from 'vue'
import VueAsyncData from 'vue-async-data'
import router from './router'
import App from './App.vue'

Vue.use(VueAsyncData)

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

这是我的 App.vue 代码：

<template>
  <div>
    {{ msg }}
    <navigation wait-for="async-data"></navigation>
  </div>
</template>

<script>

import Navigation from './components/Navigation.vue'

export default {
  name: 'app',
  components: {
    Navigation
  },
  data: function() {
    return {
      msg: 'not loaded yet...'
    }
  },
  asyncData: function (resolve, reject) {
    // load data and call resolve(data)
    // or call reject(reason) if something goes wrong
    setTimeout(function () {
      // this will call `vm.$set('msg', 'hi')` for you
      resolve({
        msg: 'hi'
      })
    }, 1000)
  }
}
</script>

msg 值在任何时候都不会改变，但组件仍会呈现。

我错过了什么吗？

Answer 1

正如 Bert Evans 所说，vue-async-data 不适用于 Vue 2.0。

我使用了 vue-router 和 created 函数来实现我所需要的（建议在：https://router.vuejs.org/en/advanced/data-fetching.html.

<template>
  <div>
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>

    <navigation v-if="currentUser"></navigation>
  </div>
</template>

<script>

import Navigation from './components/Navigation.vue'

export default {
  name: 'app',
  components: {
    Navigation
  },
  data: function() {
    return {
      loading: true,
      error: false,
      currentUser: null
    }
  },
  created: function() {
    this.fetchUserData()
  },
  methods: {
    fetchUserData: function() {
      this.$http.get('/Account/CurrentUserInfo').then(data => {
        this.currentUser = data
        this.loading = false
      }, response => {
        this.loading = false
        this.error = true
      });
    }
  }
}

</script>