页面刷新后如何从父组件到子组件获取最新数据

Question

我正在开发一个项目并使用 Vue.js 作为前端。我在 main.js 文件中有以下代码。

new Vue({ // eslint-disable-line no-new
      //el: '#app',
router,
 data () {
  return {
      friends: []
  }
},
methods: {
    getFriends: function () {
        return this.friends;
    }
},
created: function () {
    this.$http.get('/user/' + this.getUserIDCookie('userID') +
        '/friends').then(function (response) {
        this.friends = response.data;
    });
},
components: {
    'nav-bar': require('./components/Navigation.vue')
},
template: `
    <div id="app">
        <nav-bar></nav-bar>
        <router-view class="router-view"></router-view>
    </div>`
}).$mount('#app');

在其中一个页面中（例如，当页面被重定向到 localhost/#/user/1/details 时，我正在从 main.js 中检索好友列表，如下所示：

<script type="text/babel">
export default {
    name: 'profile',
    data: function () {
        return {
            user: {},
            friends: []
        }
    },
    methods: {
        // Some methods
    },
    created: function () {
        this.friends = this.$root.getFriends();
    }
}
</script>

刷新当前页面时出现问题。页面刷新后，this.friends 是 null/undefined，因为 this.$root.getFriends() 正在返回 null/undefined。我可以将它移动到 user 组件，但我想将它保留在 main.js 中，以便使用一次 GET 调用并且数据将对整个应用程序可用。

任何有关如何解决此问题的意见都将非常有用。我正在使用 Vue 2.0.1

Answer 1

真的，你想做的是将组件需要的数据作为 props 传递。

最简单最简单的方法就是这个。

<router-view class="router-view" :friends="friends"></router-view>

并且在您的个人资料组件中，

export default {
    props:["friends"],
    name: 'profile',
    data: function () {
        return {
            user: {},
            friends: []
        }
    },
    methods: {
        // Some methods
    }
}

如果您想变得更复杂，VueRouter 的更高版本允许您以多种方式pass properties to routes。

最后，如果您的应用程序变得足够复杂，总有 Vuex 或其他一些状态管理工具。

Answer 2

问题是当您刷新页面时，整个应用程序都会重新加载，其中包括异步的 get。路由器计算出它需要渲染 details，以便组件加载并调用 getFriends，但异步 get 尚未完成。

你可以通过保存并从 get 中提取 Promise 来解决这个问题，但 Bert 的回答是正确的：Vue 方式是将数据作为道具发送，不要让 children 从 parents.

中提取它

页面刷新后如何从父组件到子组件获取最新数据

How to get the latest data from parent to child components after page refresh

javascript

vue.js

vue-router

vuejs2