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

5e3812168e73d09304da6959a40155c8?s=47 kenev
January 19, 2019

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

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

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

5e3812168e73d09304da6959a40155c8?s=128

kenev

January 19, 2019
Tweet

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