Vuejs - cannot access $root data from component

Question

I'm using vue.js to manage the user and I have this piece of code to initialize vue:

const app = new Vue({
    el: '#dashboard',
    i18n: i18n,
    data:{ store },
    router: router,
    created()
    {
      this.store.user.actions.getUser();
    }
});

Inside store I have:

const store =
{
  user:
  {
    state:
    {
      user: null
    },
    actions:
    {
      getUser()
      {
        //method to retrieve user usign axios
      }
    }
  }
}

In this way, the user is correctly initialized.

Now, I have also a vue component with the following:

computed:
{
  getUser()
  {
    console.log(this.$root.store.user.state.user)
  }
},
methods:
{
  init()
  {
    console.log(this.$root.store.user.state.user)
  }
},
created()
{
  this.init();
}

But the console.log(this.$root.store.user.state.user) inside the init() method results in null, while the one inside computed returns the actual user.

Why it's like this? Shouldn't the init() method returns the user anyway?

Thank you all.

@MuhammadAhmad Thank you: I have already seen that question, but in my case I would prefer not to use props, since the component I was talking about in the question is a page called up via vue-router — JacopoLelli
– JacopoLelli, Commented Jun 5, 2021 at 15:55
@IVOGELOV yes, I have already tried to rename store, but unfortunately the init() method always returns null — JacopoLelli
– JacopoLelli, Commented Jun 5, 2021 at 15:59
Actually, the init() is returning the user, but it does so before the axios request has been resolved. You should use computed getters instead. — Igor Moraru
– Igor Moraru, Commented Jun 5, 2021 at 16:17

IVO GELOV · Accepted Answer · 2021-06-07 06:22:31Z

0

If you are able to change your init() method to return Promise - then you can wait for that Promise to resolve before instantiating the whole Vue application:

store.init().then(() =>
{
  const app = new Vue({
    el: '#dashboard',
    i18n: i18n,
    data:{ store },
    router: router,
    created()
    {
      this.store.user.actions.getUser();
    }
  });
});

answered Jun 7, 2021 at 6:22

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JacopoLelli Over a year ago

Thank you @IVOGELOV, that's exactly what I did to solve my problem!

Collectives™ on Stack Overflow

Vuejs - cannot access $root data from component

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related