Laravel 5 与路由器视图组件vue js共享根数据

最好先给出更多的上下文

我正在使用vuejs、vue路由器创建一个单页应用程序。当用户登录时，从后端返回用户对象。我使用Laravel5.4作为后端。然后在vue

$root

实例上对用户对象进行排序，这样就可以使用

this.$root.user

在任何地方访问它

我唯一的问题是，当我想要编辑用户数据时，我有一个编辑表单，其中用户数据应该自动填充现有数据。如果我只想做这样的事情，这将是很好的：

v-model=“This.$root.user.first\u name”

，但我有一个表单对象，它有助于验证并使所有内容更加模块化

因此，在

数据

返回中，我在路由器视图组件上有以下内容：

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,
            })
        }
    }

---

唯一的问题是一切都没有定义。我不知道该如何解决这个问题，因此任何帮助都值得感谢。谢谢。

我想出了一个办法

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

因此，当ajax请求获取当前用户时，我创建了一个新的Vue对象，其中所有对象都可以看到并将其分配给

Window.Event

，并针对该对象创建了一个新的Vue实例

Window.Event=newvue（{}）

现在，一旦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));
    }