Vue.js - 來自AJAX Call的全局數據

Question

我正在嘗試Vue.js ，到目前為止，我很喜歡它，因為它比角度更簡單。 我目前在我的單頁應用程序中使用vue-router和vue-resource ，后者連接到后端的API。 我認為我的主要工作是主要的app.js ，它加載了vue-router和vue-resource，以及每個路由的幾個獨立組件。

這是我的問題：當使用異步AJAX調用獲取數據時，如何使用props將全局數據傳遞給子組件？ 例如，用戶列表幾乎可以在任何子組件中使用，因此我希望主app.js獲取用戶列表，然后允許每個子組件訪問該用戶列表。 我想讓app.js獲取用戶列表的原因是我只需要為整個應用程序進行一次AJAX調用。 還有什么我應該考慮的嗎？

當我現在使用子組件中的props時，我只得到users變量初始化的空數組，而不是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, status, 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將users變量初始化為。 如何允許dashboard.js訪問app.js的users變量？ 在此先感謝您的幫助！

ps我不想使用inherit: true選項，因為我不希望所有app.js變量在子組件中可用。

Answer 1

我相信這實際上是有效的，你被$http的異步行為誤導了。 因為你的$http調用不會立即完成，你console.log被執行前的$http調用完成。

嘗試針對users watch組件，並在該處理程序中放置console.log 。

像這樣：

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

        props: ['users'],

        watch: {
            users: {
                handler: function (newValue, oldValue) {
                    console.log("users is now", this.users);
                },
                deep: true
            }
        }
    }
};

Answer 2

在新版本的Vue 1.0.0+中，您可以簡單地執行以下操作，組件內的用戶會自動更新：

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