Nuxt.jsのinjectでインジェクトしてみる話

https://vuekansai.connpass.com/event/112900/

v-kansai Vue.js/Nuxt.js meetup #2で登壇した内容です。

Transcript

1. v-kansai Vue.js/Nuxt.js meetup #2 2019.01.19 Nuxt.jsのinjectで インジェクトしてみる話 @kenfdev
2. ⾃⼰紹介
3. ⾃⼰紹介 • 福⼭ 健 • フロント&バックエンドエンジニア
 @サイダス • Udemy講師 @kenfdev • OSSに貢献するの好き
4. 仲間募集中！
5. Nuxt.jsのinject？
6. Nuxt.jsのinject https://ja.nuxtjs.org/guide/plugins#౷߹͞Εͨ஫ೖ
7. injectして 何がうれしいのか？
8. injectして何がうれしいのか？ https://bit.ly/2MhTen4
9. この発表で紹介したいこと • Demoアプリでinjectの紹介 • 開発時に何がうれしくなりそうか • テストがどのように書けそうか • 使ってみて気になったこと
10. Demoアプリ
11. Demoアプリの概要 • 概要図 • リポジトリ
 https://github.com/kenfdev/nuxt-inject-example https://vuex.vuejs.org/ja/#ঢ়ଶ؅ཧύλʔϯ-ͱ͸ͳΜͰ͔͢ʁ Gateway
12. injectの使い⽅ この設定でアプリ内様々な場 所から $deps として呼び出せ るようになる plugins/dependencies.ts nuxt.config.js
13. 開発時に うれしそうなこと
14. 開発時にうれしいこと① • Vuex内は要件の変化に強い Gateway Gateway Gateway GitHub Gateway 対象リポジトリが GitHubにある GitLab Gateway 対象リポジトリが GitLabにある GitLab
 & GitHub Gateway 対象リポジトリがGitHub にもGitLabにある Vuexのビジネスロジック は変わらない！ リポジトリのスター数 とってきてー
15. • 環境変数を使うことで「npm run offline」のような開発 モードも簡単に実現できる。 開発時にうれしいこと② Gateway Gateway Gateway Stub Gateway 固定値を返すスタブにし てしまうことでローカル ですべて完結！ どこでも開発できるよー
16. テストの雰囲気
17. Gatewa y テストでの使い⽅例 Mockを作って Storeに差し込む！ ただし、せっかくTypeScript 使ってるのにすごく微妙… ビジネスロジック のテストに集中で きる！
18. 概ねいい感じだけど 気になったところ
19. 気になったところ • pluginsに書くと必ずメインのbundleに⼊っちゃう
 （lazy load対象じゃない） • Vuexを使う場合はstoreでしか使うことがないのでは？
 （Vueインスタンスとcontextにも注⼊されてるけど） • なのでstoreに直接差し込んじゃえばいい気もする https://bit.ly/2MhTWR9
20. まとめ
21. まとめ • injectの仕組みが最初から⽤意されているのはうれしい • ある程度のアプリであればinjectでDIするのも⼀つの⼿段 • プラグインもLazyLoadできると⼤規模アプリで巨⼤な dependenciesファイルにならずに済むかも？ • Vuexを使うアプリであればStoreにだけinjectする⼿段が あれば良いだけな気もする（ここはまだ経験不⾜です）
22. ご清聴ありがとうございました！ @kenfdev