Как запустить метод при загрузке страницы?

Question

[WebDev]

При инициализации проекта идет запрос информации об авторизованном пользователе.
В этом время в компонте нужно загрузить новости для пользователя, но для этого нужно сначала получить его id.
Теоритически, запрос информации о пользователе может подвиснуть и на момент загрузки компонента, информация id пользователя может еще отсутствовать.
То есть такой подход не сработает:

//component
...
created() {
    this.$axios.post('/news', {user_id: this.$store.state.user.id})
}

Тогда можно запустить этот метод в watch:

//component
...
watch: {
    '$store.state.user': function() {
            this.$axios.post('/news', {user_id: this.$store.state.user.id})
    }
}

Но этот метод не сработает, если на момент загрузки компонента информация уже загрузилась.
Тогда третий вариант:

//component
...
watch: {
    '$store.state.user': function() {
           this.loadNews();
    }
},
created() {
    this.loadNews();
},
methods: {
    loadNews() {
        this.$axios.post('/news', {user_id: this.$store.state.user.id});
    }
}

Но такой код выглядит избыточным.
Как правильно делать?

Comments

[Koteezy]

Раз у тебя есть store - то просто загружай пользователя до создания самого приложения.

store.dispatch('GET_AUTH_USER').then( () => {
  new Vue({ 
    store
  }).$mount( '#app' );
})

Answer 1

[Konstantin Malyarov]

beforeCreate

Answer 2

[fl3nkey]

//component
...
watch: {
    '$store.state.user': {
         handler() {
             this.loadNews();
         },
         immediate: true
     }
},
methods: {
    loadNews() {
        this.$axios.post('/news', {user_id: this.$store.state.user.id});
    }
}

Answer 3

[nvdfxx]

То есть такой подход не сработает:

//component
...
created() {
    this.$axios.post('/news', {user_id: this.$store.state.user.id})
}

Почему не сработает?