こんにちは、”はふぃ”です。
Vue.jsでサイトを作成している時に全ての画面で取得したいデータや実行したい処理ってありますよね?
例えば、全画面で共通のヘッダーに必要な情報を取得するためにAPIをたたいたり、特定のstoreのデータはページ遷移時にリセットしたいなど。
もちろんそれらの処理を全てのページに書いても実現はできるのですが、めんどくさいですし効率が悪いです。
そこで今回は、全ての画面で実行する処理を実装する方法について紹介したいと思います。
使う機能
Vue RouterのafterEach
というフックを利用します。
router.afterEach((to, from) => { // ... })
グローバルな After フック
参考:https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E8%A7%A3%E6%B1%BA%E3%82%AC%E3%83%BC%E3%83%89
afterEach
はその名の通り画面遷移時に毎回実行する処理なので、ここに処理を書くことで自動的に全ての画面で実行されることになります。
実装方法
事前準備
今回は全ての画面で実行する処理として、
“特定の値をstoreにセットする”
処理を設定したいと思います。
そのための事前準備としてstoreと画面を作成します。
storeの作成
特定の値をセットする処理をmutations
に、セットする対象をstate
に記入します。
< store/sample/afterEachDefault/mutations.js >
export function setDefaultVal (state, val) { state.defaultVal = val }
< store/sample/afterEachDefault/state.js >
export default () => ({ defaultVal: null })
画面の作成
stateの値をそのまま表示するだけの簡単なページを作成します。
< components/pages/sample/afterEachDefaultPage/index.vue >
<template> <h1>{{ defaultVal }}</h1> </template> <script> import { mapState } from 'vuex' export default { computed: { ...mapState('sample/afterEachDefault', [ 'defaultVal' ]) } } </script>
全ての画面で実行する処理の実装
ここからが今回紹介する全ての画面で処理を実行する方法になります!
まず、pluginsファイルを作成し、afterEach
でstoreのmutationsの処理を設定します。
< plugins/router.js >
function afterEach (context, to, from) { context.store.commit('sample/afterEachDefault/setDefaultVal', 'Hello World!!') } export default (context) => { context.app.router.afterEach(afterEach.bind(null, context)) }
pluginsでstoreはcontext
の中に含まれているため、routerのafterEachにbind
を使ってcontextを渡します。
bind() メソッドは新しい関数を生成し、その関数が呼び出された時の一連の引数の前に、提供された値が設定された this キーワードが追加されて呼び出されます
参考:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
このpluginsをnuxt.config.js
に設定します。
< nuxt.config.js >
… plugins: [ '~/plugins/storeWatchPlugin', '~/plugins/vue-scrollto', { src: '~/plugins/router', ssr: false } ], …
表示結果
上記の状態でプログラムを起動すると、nullだったdefaultVal
に'Hello World!!'
がセットされるため以下のような表示となります。

もちろん他の画面にアクセスした際にもstore/sample/afterEachDefault/state.js
のdefaultVal
には'Hello World!!'
がセットされます。
注意
afterEach
は画面遷移時に非同期で実行されるので、”この処理が完了するまでは画面は表示しない”というような処理はbeforeEach
やページごとにfetch
を使って記述するようにしましょう!
router.beforeEach
参考:https://router.vuejs.org/ja/guide/advanced/navigation-guards.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E8%A7%A3%E6%B1%BA%E3%82%AC%E3%83%BC%E3%83%89
fetch メソッド
参考:https://ja.nuxtjs.org/api/pages-fetch/
参考
今回のコードはgithubで公開中なので参考にしてみてください!↓
https://github.com/hafilog/vue-sample/tree/master/components/pages/sample