vue 中能否确保 this.$root.user 没有被赋值前，阻塞在那儿别干任何其他事儿（不使用 vuex）？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1297 天前的主题，其中的信息可能已经有所发展或是发生改变。

App.vue （ App.vue 是最顶级 router-view 元素所在的组件）会在 created 钩子中根据 LocalStorage 中用户相关的数据尝试帮用户自动登录，但这个过程中需要使用 axios 和后端交互，最终登录成功会给 this.$root.user 赋有效的值。

根据 url，vue-router 加载不同的子组件。一些子组件将会在 created 阶段使用到 this.$root.user 的值。

在不使用 vuex 的前提下，能否做到让那些使用到了 this.$root.user 的子组件（准确地说是使用到了 this.$root.user.id 的子组件）绝对不会报

Error in created hook: "TypeError: Cannot read property 'id' of undefined"

的错误？

谢谢

已经做过的尝试：

将尝试登录的操作放到全局路由守卫，但这里访问不到 this.$root 。

将 App.vue 的 created 函数加 async 修饰，并将其中和后端交互的函数也用 async 修饰，在 created 使用时 await 它。结果上来看 App.vue 的 created 函数似乎是有被阻塞的，但是它被阻塞并不影响到 router-view 元素渲染子组件子组件执行自己的 created 函数。。

第 1 条附言 · 2021-05-15 20:53:46 +08:00

一个解决方案，在 main.js 即将 Vue 实例挂载到 #app 元素的那个 js 文件里：

async function vue() {
    let user = await login();
    let selectedBook = await getSelectedBook(user);
    let vue =  new Vue({
        router,
        render: h => h(App),
        data: {
            user: user,
            selectedBook: selectedBook
        },
    });
    vue.$mount('#app');
}

vue();

this

组件

created

vuex

4 条回复 • 2021-05-16 18:04:06 +08:00

doommm

2021-05-15 19:25:03 +08:00 via Android

根组件

doommm

2021-05-15 19:25:53 +08:00 via Android

@doommm 拉取到数据之后再挂载根组件？

Newyorkcity

2021-05-15 20:52:48 +08:00

@doommm 感谢你提供的灵感，我把 main.js 改成这样了，最后 ok 了

async function vue() {
let user = await login();
let vue = new Vue({
router,
render: h => h(App),
data: {
user: user
},
});
vue.$mount('#app');
}

vue();

不知道是不是你的意思 hhh

zzl22100048

2021-05-16 18:04:06 +08:00 via iPhone

只是不报错可以用 this.$root?.user?.id