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

Posted 2023-02-23

【中文标题】与路由器视图组件vue js共享根数据

【英文标题】：Sharing root data with router-view component 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,
            )
        
    

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

【参考方案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));