javascript – Vue.js – 来自AJAX Call的全局数据

我正在尝试 Vue.js,到目前为止,我很喜欢它,因为它比角度更简单.我目前在我的单页应用程序中使用 vue-router和 vue-resource,后者连接到后端的API.我认为我的主要工作是主要的app.js,它加载了vue-router和vue-resource,以及每个路由的几个独立组件.

这是我的问题：当使用异步AJAX调用获取数据时,如何使用props将全局数据传递给子组件？例如,用户列表几乎可以在任何子组件中使用,因此我希望主app.js获取用户列表,然后允许每个子组件访问该用户列表.我想让app.js获取用户列表的原因是我只需要为整个应用程序进行一次AJAX调用.还有什么我应该考虑的吗？

当我现在使用子组件中的props时,我只得到用户变量初始化的空数组,而不是AJAX调用后获取的数据.以下是一些示例代码：

简化的App.js

var Vue = require('vue');

var VueRouter = require('vue-router')
Vue.use(VueRouter);
var router = new VueRouter({
    // Options
});

router.map({
    '*': {
        component: {
            template: '<p>Not found!</p>'
        }
    },'/' : require('./components/dashboard.js'),});

Vue.use(require('vue-resource'));

var App = Vue.extend({
    ready: function() {
        this.fetchUsers();
    },data: function() {
        return {
            users: [],};
    },methods: {
        fetchUsers: function() {
            this.$http.get('/api/v1/users/list',function(data,status,response) {
                this.users = data;
            }).error(function (data,request) {
                // handle error
            });
        }
    }
});

router.start(App,'#app')

简化的app.html

<div id="app" v-cloak>
    <router-view users = "{{ users }}">
    </router-view>
</div>

简化的dashboard.js

module.exports = {
    component: {
        ready: function() {
            console.log(this.users);
        },props: ['users'],},};

当dashboard.js运行时,它会向控制台输出一个空数组,因为app.js将用户变量初始化为.如何允许dashboard.js访问app.js中的users变量？在此先感谢您的帮助！

附：我不想使用inherit：true选项,因为我不希望所有app.js变量在子组件中可用.

解决方法

我相信这实际上是有效的,你被$http的异步行为误导了.由于$http调用未立即完成,因此在$http调用完成之前,console.log正在执行.

尝试针对用户监视组件,并在该处理程序中放置console.log.

像这样：

module.exports = {
    component: {
        ready: function() {
            console.log(this.users);
        },watch: {
            users: {
                handler: function (newValue,oldValue) {
                    console.log("users is Now",this.users);
                },deep: true
            }
        }
    }
};