Tech Vue/Nuxt.js

Vue RouterでVuex(store)のstateデータを取得する方法 [Vue.js/Nuxt.js]

Vue Router (vue-router) はVue.js (Nuxt.js)に標準で組み込まれたルーターで、アプリケーションのページ間遷移で役立っています。

一方、VuexはVue.jsもしくはNuxt.jsのアプリケーション全体から状態(データ)をリアルタイムに参照・更新ができる仕組み(状態管理パターン)であり、こちらもよく使われています。

今回の記事では、Vue Router上でVuexに載せられたデータを参照する方法を確認していきます。

 

結論

/router/index.jsなどの設定ファイル

store のインポート

import store from '../store'

 

routerインスタンスでのstore参照例
store.getters.getIsValid でgetter経由でisValidステートを参照している

router.beforeEach((to, from, next) => {
    if (to.name == 'some-name') {
        if (store.getters.getIsValid === false) {
            next({
                path: '/not-valid-page',
            })
        } else {
            next()
        }
    } else {
        next();
    }
});

 

実行環境

 

$ node --version
v16.0.0
$ npm list -g vue
/usr/local/lib
└─┬ @vue/cli@4.5.13
  └── vue@2.6.14

 

※以下の方法はVue3でも同じです。

 

RouterからStoreデータを参照する

Vuexの設定

ここでは簡単化のため、以下のようなstateがVuexに設定されているとします。

/store/index.js などのvuex設定ファイル

state: {
  isChecked: false,    // Routerで参照する何らかのデータ
},
getters: {
  getIsChecked(state) {
    return state.isChecked
  },
},

 

isCheckedのデータを参照したいときは getIsChecked() をコールすればOKということですね。

 

Vue Routerの設定

次にRouterの設定ファイルを開いて、このgetterを呼び出します。

store のインポートを忘れないようにしましょう。

/router/index.js などのrouter設定ファイル

import store from '../store'

 

vue-routerを初めて設定したときから次のようにrouterインスタンスが生成されていると思います。

const router = new VueRouter({ ... })

 

このrouterインスタンスはユーザーがページを遷移するたびに参照されるので、これを活用することで条件(データ・状態)に合わせた柔軟なトリガーを設定することができます。

例えば、グローバル before ガード(router.beforeEach)は、どのページが呼び出される時にも必ず事前に呼ばれるコールバックを登録できます。

これを用いてvuexのstateに応じたページの切り替えをやってみましょう。

 

const routes = [
  {
    path: '/before-checked', 
    name: 'BeforeChecked',
    component: () => import('../views/BeforeChecked.vue')
  },
  {
    path: '/after-checked', 
    name: 'AfterChecked',
    component: () => import('../views/AfterChecked.vue')
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
router.beforeEach((to, from, next) => {
  if (to.name == 'AfterChecked') {
      if (store.getters.getIsChecked === false) {
          next({
              path: '/before-checked',
          })
      } else {
          next()
      }
  } else {
      next();
  }
});

 

/after-checked ページにアクセスしようとすると、store.getters.getIsChecked でstate.isCheckedの状態を受け取り、それがfalseのときには /before-checkedに遷移するという流れになります。

他のページへのリダイレクト(移動)はnext({path: 'xxxx'}) またはシンプルにnext('xxxx')とすればOKです。

next() (引数無し)を呼ぶと(他に何もフックが設定されていなければ)このままアクセスしたページが処理されます。

beforeEach グローバルガードはすべてのページ読み込みの前に呼ばれるので、/after-checkedページ以外のページではnext() を呼び、パスします。

 

今回参考にしたページ・資料

ナビゲーションガード | Vue Router

 

  • この記事を書いた人

次世代ペンギン

長いのでペンギンとお呼びください。システム開発・プログラミングのお仕事をしています。甘味とコーヒーは生命線。多くの人に役立つ情報のシェアが目標です。

人気の記事

1

会社員でプログラマーとして働いている人、インフラやネットワークのエンジニアとして働いている人の中には、フリーランスのプログラマーとして独立、もしくは転向したい人もいるので ...

2

キャリアアップのため、または高収入を目指して、しっかりプログラミングを学びたいという人が増えてきましたね。 この記事では現役のエンジニアである私が、実際に仕事で稼げるよう ...

3

フリーランスのプログラマーにとって収入の向上に最も直結するのはスキルです。 必要なスキル、スキルの獲得方法が気になる人も多いでしょう。 また、これからフリーランスを目指す ...

4

Vuetifyの v-progress-circular コンポーネントは、数値データや処理状況を環状(円状)のデザインで教えてくれるUIデザインです。 ローディングのス ...

5

Vuexのstore(ストア)を使うと、各コンポーネント間で個別にデータのやり取りすることなく、データを一元的に管理できます。Vueでは欠かせない機能といえるでしょう。 ...

-Tech, Vue/Nuxt.js
-,