Tech Vue/Nuxt.js

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

2021年9月7日

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

※画像はずとまよの新曲とは一切関係ありません   ずっと真夜中でいいのに。(以下、ずとまよ)の新曲『勘ぐれい』のMVが12月1日に公開されましたね。 MV前に公開されていた原曲を聴き、神曲な ...

6

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

-Tech, Vue/Nuxt.js
-,

© 2021 ペンギンのーと