SPA(シングルページアプリケーション)を簡単に制作できるVue.js
Vue.jsによるSPA制作のネックとなる「titleタグ」の変更の方法をご紹介します。(各ページ毎でタイトルを変更する方法)
Mixinを使用する
Vue.jsのSPA制作でタイトルタグをページ(route)によって変更するオススメの方法は「Mixin」を使用した方法です。
まず、手始めに、Vue.jsのミックスインを簡単に説明しておくと、Vue Componentで使用する「methods」や「created」を登録しておき、再利用可能な形で呼び出す機能です。(詳しくは本家のサイトを参照)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const mixIn = { created() { console.log("rara world!"); } } new Vue({ mixins: [mixIn] }); => consoleに「rara world」と表示 |
この例の場合、「mixIn」に「createdの際にrara world!とログを表示する機能」を登録して、各Componentの「new Vue」でインスタンス化する際にそのmixInを渡すと、そのComponentが
createdされたときにログが表示されます。
つまり、createdやmethods,destroyedなどのVueの機能を色々なComponentで使いまわす機能ですね。
Global Mixinを使用する
本題の「タイトルタグを変更する方法」は、1度登録したMixinがすべてのComponentに影響を与える「Global Mixin」という機能を使います。
Vue CLIで制作したときのメインファイル「main.js」などの一番大本のjsファイルに、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './App.vue'; ...必要なライブラリ ... const globalMixIn = { created() { let { title, headerTitle } = this.$options if (title) { document.title = title; } if (headerTitle) { this.$store.dispatch('changeHeaderTitle', headerTitle); } } } Vue.mixin(globalMixIn); ... new Vue({ el: '#app', router, render: h => h(App) }); |
というかたちで、GlobalのVueにMixinを登録します。(Vue.mixin(globalMixIn))
こうすることで、SPAの各Componentが呼び出される度に、globalMixInのcreatedが実行されます。そして、各Componentのoptionsに
- titleがある場合は、document.titleで直接titleタグのDOMを変更
- headerTitleがある場合は、VuexのstoreのheaderTitleを変更するdispatchを実行(共通のヘッダーComponentにgettersでheaderTitleを取得する記載をしておく)
という処理になります。
各Coponentでは
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div> hogehoge </div> </template> <script> export default { title: 'タイトルタグに入れる文字', headerTitle: 'ヘッダータイトルに入れる文字', data() { return { hogehoge: null } } } </script> |
という形で、titleとheaderTitleに値を記載して、Global MixInに値を渡します。
Global MixInは色々な使い道がある
今回紹介した「titleタグ」や「headerTitle等のVuexで管理している値」をComponent毎に変更するだけでなく、ページ遷移する度に行いたい処理をGlobal MixInに記述しておけば、各Componentのファイルサイズを小さくすることが出来ます。
SPA(シングルページアプリケーション)では状態管理や、ページ遷移が非常にやっかいな問題になることが多く、Global MixInやfilterをうまく利用して、シンプルで修正のしやすい綺麗なwebアプリケーションを作るようにしましょう！
