与路由器视图组件vue js共享根数据答案

【问题标题】：Sharing root data with router-view component vue js与路由器视图组件vue js共享根数据
【发布时间】：2017-08-12 08:14:00
【问题描述】：

最好先给出更多背景信息。

我正在使用 vuejs、vue-router 创建一个单页应用程序。当用户登录时，从后端返回用户对象。我在后端使用 Laravel 5.4。然后用户对象在 vue $root 实例上进行排序，因此可以使用 this.$root.user 在任何地方访问它。

我唯一的问题是，当我想编辑用户数据时，我有一个编辑表单，其中用户数据应该自动填充现有数据。如果我只想做这样的事情会很好：v-model="this.$root.user.first_name" 但我有一个表单对象，它有助于验证并使一切变得更加模块化。

所以在data 返回我在路由器视图组件上有这个：

data: function() {
        return {
            form: new Form({
                first_name: this.$root.user.first_name,
                last_name: this.$root.user.last_name,
                country: this.$root.user.country,
                preffered_currency: this.$root.user.preffered_currency,
                email: this.$root.user.email,
            })
        }
    }

唯一的问题是一切都是未定义的。我不确定如何解决这个问题，所以任何帮助都值得赞赏。谢谢。

【问题讨论】：

标签： laravel-5 vuejs2 vue-component vue-router

【解决方案1】：

我想出了一个办法。

我忘记补充的是，在刷新页面时，vue 显然会忘记所有当前存储的数据，因此我必须向后端发出请求以获取当前用户。

因此，当发出 ajax 请求以获取当前用户时，我创建了一个新的 Vue 对象，其中所有对象都可以看到并将其分配给 Window.Event 并针对它创建了一个新的 Vue 实例。 Window.Event = new Vue({});

现在，一旦 ajax 请求返回，我就执行了Window.Event.$emit('user', this.user)，并且在需要用户数据的组件上，我刚刚使用create() 创建了一个$on 事件。

created() {
        Window.Event.$on('user', function(user){
            this.form.first_name = user.first_name
            this.form.last_name = user.last_name
            this.form.country = user.country
            this.form.preffered_currency = user.preffered_currency
            this.form.email = user.email
        }.bind(this));
    }

【讨论】：