Vue.jsでは、The Progressive JavaScript Frameworkを掲げる通り、コアは小さく、拡張しやすいように作られています。今期アニメではゴブリンスレイヤーとスライムでゴブリンの違いを楽しんでます。
そのため独自の機能が必要になった場合、自分でプラグインを追加していくということも簡単です（もちろんmixinやVuexなどなど状況に応じて他の選択肢もあります）
実用的な簡単なプラグインの例としてyagish履歴書でも使ってるSiteというプラグインを紹介します。
サイト名などいろんな所で使う情報をまとめ、呼べるようにするプラグインです。
プラグイン本体は最小構成で7行ぐらい。サイト名nameを持った$siteを追加します。
実際はサイト名だけでなく、公開URLも入れて本番、ステージング、開発で変えられるようにしてます。
環境で変わる情報は環境変数に設定していますが、template内では直接process.envを呼べないため、computedなどでscript側でコンポーネントごとに作る必要があり、面倒なので作りました。
Vue CLI3での環境変数の詳細は下記のページにあります。
cli.vuejs.org
pluginsというフォルダは必須ではないですが、数が増えてきたら分けた方が分かりやすいと思います。
plugins/site.js
const Site = {
install: function (Vue, options) {
Vue.prototype.$site = {
name: process.env.VUE_APP_SITE_NAME
}
}
}
export default Siteもちろん値を増やしたり、関数を追加することもできます。
main.jsでインストールします
main.js
import Site from './plugins/site' Vue.use(Site)
main.jsでインストールしたのであとはどのコンポーネント内で使えます。
template内では{{ $site.name }}で表示や使用ができ、script内ではthis.$site.nameで使えるようになります。
yagiComponent.vue
<template>
<div v-if="$site.name">{{ $site.name }}</div>
</template>
<script>
export default {
data: function () {
return {}
},
mounted: function () {
console.log(this.$site.name)
}
}
</script>
もっと高度なプラグイン
今回のnameプロパティはリアクティブではないので、もしnameが変更されたとしても、テンプレートは自動的に更新されません。
もし、どこでも呼び出せるリアクティブな値を持たせたい、すべてのコンポーネントでイベントをemit、onしたい場合などはプラグインにVueインスタンスを入れてしまうこともできます。
複雑になったらVuexの方が相応しい場合もあると思いますが、選択肢として知っていた方が開発は楽になると思います。
plugins/event-hub.js
const eventHub = {
install: function (Vue, options) {
Vue.prototype.$eventHub = new Vue()
}
}
export default eventHubmedium.com
uyamazak.hatenablog.com
ちなみにyagish履歴書のヤギの名前、色などはVuexを使わず、yagiプラグインで行っています。
dataに色などの値を持ち、変更があったらローカルに保存したり、mountedで読み込み処理をしています。
- 作者: 川口和也,喜多啓介,野田陽平,手島拓也,片山真也
- 出版社/メーカー: 技術評論社
- 発売日: 2018/09/22
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
- 作者: mio
- 出版社/メーカー: シーアンドアール研究所
- 発売日: 2018/05/29
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
