Vue.jsでthis.$store.stateの値が取得できない

Question

お世話になっております。

下記のソースで実行すると、3箇所のconsole.logがすべてundefinedとなります

 mounted() {
    this.init();
  },

  methods: {
    init:async function() {
      //ログイン状態チェック
      await this.get_value();
      console.log(this.user_value)
    }
    get_value:function(){
      this.user_value = this.$store.state.user_value
      console.log(this.user_value)
      console.log(this.$store.state.user_value)
    },
  },

this.init()を下記のように修正するとconsole.log()の出力に値が入ってくるのですが、
動作を安定させるために、
・this.$store.state
に値が入ってから
this.init()
が動作するというようにしたいです。
おわかりになる方いらっしゃったらお願いします

    this.$nextTick(() => {
      var _this = this;
      setTimeout(() => {
        _this.init();
      }, 100);
    });

Answer 1

ログインがされているかどうかのチェックでございましたら、
VueRouterを使われている場合、下記のようなイメージでrouter側(router.jsやindex.js等)で制御かけて
読み込んだ後に遷移させるような形はいかがでしょうか？

// vuexの入っているファイルをインポートしてください: kutu様の設定に合わせて変更ください。
import store from '@/store'
// 遷移前処理
const getUserAuthenticated = (to, from, next) => {
  store.dispatch(Vuexでuserデータ取得する処理を記載: kutu様の設定に合わせて変更ください。)
    .then(() => {
    next()
  })
}
// router パスやコンポーネント名などはkutu様の設定に合わせて変更ください。
const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'FooComponentName',
      component: BarComponent,
      beforeEnter: getUserAuthenticated
    },
  ]
})