【Vue.js】全ての画面で実行したい処理の実装方法

こんにちは、”はふぃ”です。

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

HAFILOG