nuxt.js で plugins を作る

Transcript

1. chatbox.inc 後藤 知宏 Nuxt.js で plugin を作る
2. chatbox.inc 後 藤 知 宏 株式会社chatbox 代表取締役 関西フロントエンドUG代表 Twitter : @_mikakane エンジニア / 技術顧問
3. chatbox.inc Nuxt.js Plugins Vue.js の plugins とはちょっと違う、Nuxt.js 独自の機能 https:/ /ja.nuxtjs.org/guide/plugins
4. chatbox.inc Nuxt.js Plugins Vue.js の plugins とはちょっと違う、Nuxt.js 独自の機能 Nuxt.js では JavaScript プラグインを定義することができ、それはルートの Vue.js アプリケーション がインスタンス化される前に実行されます。この機能は、自前のライブラリや外部のモジュールを使 用する際にとりわけ有用です。
5. chatbox.inc sample plugin import Vue from 'vue' import SomePlugins from ‘some-vue-plugins’ Vue.use(SomePlugins) export default (ctx, inject) => { // ... some code } Vue.js の Plugin 読み込みなど Vue オブジェクトへの操作 関数をexport すると処理してもらえる
6. chatbox.inc use plugin // nuxt.config.js export default { // ... plugins: ['~/plugins/some-plugin.js'] // ... } 自作の Plugin は plugins フォルダに格納して、 nuxt.config.js から読み込ませてロードすることができる。
7. chatbox.inc use plugin only in browser // nuxt.config.js export default { // ... plugins: [ '~/plugins/some-plugin.js', { src: '~/plugins/browser-plugin.js', ssr: false } ] } localStorage や Browser API を利用するなど、 ブラウザ側でのみ利用したい場合向けの ssr オプション
8. chatbox.inc Name conventional plugin export default { plugins: [ '~/plugins/foo.client.js', // only in client side '~/plugins/bar.server.js', // only in server side '~/plugins/baz.js' // both client & server ] } ファイルの拡張子で only in client / server を自動認識させることもできる( Nuxt.js 2.4 以降。
9. chatbox.inc Extend Nuxt.js Nuxt.js に グローバルな機能を追加したい。 アラートやローディングなど システム全体で利用するようなもの
10. chatbox.inc Combined injection export default ({ store }, inject) => { inject('loading', { on: () => { store.commit('loading/on') }, off: () => {store.commit('loading/off') } }) } Nuxt.js に `loading` という名前で オブジェクトを注入 引数から Nuxt.js のコンテキストにアクセスできる。
11. chatbox.inc use in vue component export default { async mounted(){ this.$loading.on() await this.loadUserList() this.$loading.off() } } `loader` という名前で注入したオブジェクトは、 `this.$loading` の形式で アクセスできる。
12. chatbox.inc use in vuex export const actions = { loadItemList ({ commit }) { this.$loader.on() // connect to REST API this.$loader.off() } } inject で注入したオブジェクトは、 Vuex Store内からもアクセスできる。
13. chatbox.inc Nuxt.js injection 一般的ある UI ライブラリで用いられるような Vue の prototype を操作する方法では、 Vue Compoent 内でしかその関数の恩恵が受けられない Nuxt.js 内で頻繁に登場するような共通処理を定義するのに便利 Plugin 経由で inject したオブジェクトは、 Nuxt.js の Vue Compoent から Vuex Storeまで 様々な箇所で用いることができる。
14. chatbox.inc 例 1 Store の操作 export default ({ store }, inject) => { inject('_loading', { on: () => { store.commit('loading/on') }, off: () => {store.commit('loading/off') } }) } 表示のON/OFF を Store で制御するタイプの UI Layout などで State をbind して v-if で表示制御
15. chatbox.inc 例2 コンポーネントの利用 import Vue from "vue"; import Alert from "~/components/layout/Alert.vue" export default (ctx, inject) => { inject('_alert', { error(message){ const alert = new (Vue.extend(Alert))({ propsData: { message } }) alert.vm = alert.$mount() document.body.appendChild(alert.vm.$el) } }) }
16. chatbox.inc 例3 localStorage の操作 const tokenKey = "LOGINTOKEN" export default ({store}, inject) => { inject('_auth', { async user(){ if(store.state.user.user){ return store.state.user.user }else{ const token = localStorage.getItem(tokenKey) || "" const {user} = await store.dispatch("user/RELOGIN", token) return user } }, }) }
17. chatbox.inc コード分割のススメ Nuxt.js でのアプリケーションコーディングを、 もっとわかりやすく、もっと簡単に よりシンプルで、読みやすい Component の形を考える
18. chatbox.inc moduled functions Vue Component の methods や computed が荒ぶると コードの可読性が著しく低下してくる。 単純な JS 関数はデータ処理には便利だが、 Vue のコンテキストを持っておらず不便 mixin はVue コンテキストを持った関数を注入できるが、 名前の衝突が不安 store の map は便利だが技術的なコンテキストが強い。
19. chatbox.inc Nuxt.js Injection inject を利用することで特定の処理系を分離 Vue Component は 注入名と操作方法のみを 知っていれば良くなり、実装を知る必要がなくなる inject なら 必要な Nuxt コンテキストを 選択的に注入する事ができ、plugin の依存も明確 Vue.js の prototype 操作よりも運用可能な範囲が広く、 Store の Mapping よりも 技術的なコンテキストが薄い
20. chatbox.inc Plugin work well シンプルだがとても大事な設計のミソ Vue Component をよりシンプルに読みやすく ロジックを様々な形で分離する。
21. chatbox.inc Thanks!