vue-async-data不起作用

Question

我正在尝试在呈现我的Vue组件之前使用Vue-Async-data来获取数据，但我没有成功。我没有得到任何误差，但根本不起作用。

这是我的 main.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 值随时都不会改变，但是该组件仍会呈现。

我是否想念somenthing？

Answer 1

正如伯特·埃文斯(Bert Evans(所说的，vue-async-data与vue 2.0不起作用。

我使用vue-router和创建功能来实现我需要的东西(如：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>