Upgrade to Pro — share decks privately, control downloads, hide ads and more …

「使いどころ」 からはじめるVuex

「使いどころ」 からはじめるVuex

Vue.jsに入門するにあたって、Vue.jsのドキュメント、入門記事、活用事例…などで Vuex が登場してきますが、

- なんでVuexを使うんだろう
- どんなところに使うんだろう
ともやもやしながら進めていませんか?

ここでは、Vuexの使いどころがスッキリした体験談からVuexを使い始める話をします。

F5367e6dde42dda84768b5b145c12eef?s=128

Masataka Yoshida

December 13, 2018
Tweet

More Decks by Masataka Yoshida

Other Decks in Programming

Transcript

  1. 「使いどころ」 からはじめるVuex 2018/12/13 fun-tech meetup #7 Webフロントエンド Masataka Yoshida

  2. 自己紹介 吉田 匡孝(Masataka Yoshida) 株式会社オープンストリーム 戦略技術推進本部 \2 目に見えるモノを作る + 新しい技術に触れるおしごとがしたいなー

    Web
 CakePHP, Spring, … スマートフォンアプリ
 Ionic, Objective-C, Java, … AWS, Python, …
  3. はなすこと • 何でVuexが必要なのか • Vuexの入門 \3 はなさないこと • Vue.jsの入門・チュートリアル •

    Vuexを用いた状態管理の設計について
  4. 何でVuexが必要なのか

  5. Vue.js便利ですよね この、データを渡す部分について \5 <template> <section class="container"> <h2> My supreme {{

    projectName }} project </h2> </section> </template> <script> export default { computed: { projectName() { return 'Nuxt.js' } } } </script>
  6. Vuex • Vue.jsを使った事例によく Vuex が出てくる • Vue.jsドキュメント > スケールアップ >

    状態管理 \6 https://jp.vuejs.org/v2/guide/state-management.html
  7. Vuexとは? • 状態管理パターン + ライブラリ - “状態”管理パターン → カウンターの「数値」 https://vuex.vuejs.org/ja/

  8. None
  9. “Vuexでコレを作りました!” • Vuex 入門で出てくる例 - ToDoリスト… - ショッピングカート… - 検索アプリ…

    \9
  10. 正直、何にVuexを 使えばいいか分からない

  11. ある「別」の例から考える • 名前を書き換えたまま次のページに遷移する \11 ▼ 名前を変えるボタン

  12. Nuxt.jsを用いて話します • 新しくプロジェクトを立ち上げる想定 - ページは「pages」 - コンポーネントは「components」 など、所定のディレクトリに置くだけで
 機能する \12

  13. コンポーネント(Vue.js) • この部分は使い回しできるよね \13 <template> <div class="sample"> <p> Load Success!

    {{ name }} <button @click="$emit('callme', name)">Call me!</button> </p> </div> </template> <script> module.exports = { props: { name: { default: ‘SAMPLE' } } } </script> <template> <section class="container"> <sample name=“Hoge" @callme="onCallMe"/> </section> </template> <script> import Sample from ‘~/components/ Sample.vue' export default { components: { Sample }, methods: { onCallMe: function(callName) { this.projectName = callName } } } </script> pages/index.vue components/Sample.vue
  14. 次のページに渡すには • Vuexを使わないでこの状態を次のページに渡したい \14 →Routerのパラメータとして渡す!GETパラメーターなイメージ <nuxt-link :to="{ name: 'nextpage-projectName', params:

    { projectName: projectName }}" >go to next</nuxt-link><br > My supreme {{ $route.params.projectName }} project 送り元 受け側 ▶
  15. データの量が増えたらどうしますか? 100ページにわたって リンクを貼って受け取る処理を 書きますか?

  16. None
  17. そこでVuex Fuga Fugaにしろ… Fugaにしろ… Fugaにするボタン がクリックされた!

  18. そこでVuex Fuga Fugaにしろ… Fugaにしろ… Fugaにするボタン がクリックされた!

  19. 一つにまとめる? 自分で値の置き場を作れば 面倒くさいVuexは不要では

  20. 一つにまとめる? 自分で値の置き場を作れば 面倒くさいVuexは不要では ◦

  21. 一つにまとめる? 自分で値の置き場を作れば 面倒くさいVuexは不要では ◦

  22. https://vuex.vuejs.org/ja/ 小規模ならVuexなしで問題ない

  23. どうやってデバッグしますか? その仕組みも自分で作りますか? https://github.com/vuejs/vue-devtools

  24. 用意してくれるVuex便利 ☺

  25. Vuexの入門

  26. Vuexのはじめかた • Vuexをインストールする • ストアを作る - 状態を保持する state - 状態を変更する

    mutations - mutationを呼び出すactions - 他にgetterがある • ストアを使う \26
  27. Vuexをインストールする • Nuxt.jsにはVuexが入っている インストール(ファイル配置・読み込み)の手間がなくなる • 所定の場所(store/)にストアを置くだけで使えるようになる • Nuxt.jsを使わない場合でもVuexは使えます ファイル配置後はVuexを読み込む必要があります(2パターン) \27

    <script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script> import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) Nuxt.jsを使いましょう
  28. ストアを作る \28 export const state = () => ({ projectName:

    'Vuex.js' }) export const mutations = { change(state, newName) { state.projectName = newName }, reset(state) { state.projectName = 'Vuex.js' } } - 状態を管理する state - 状態を変更する mutations store/vuexsample.js stateの名前と初期値 mutationの名前と
 変更処理の内容
  29. あれ? actions は??

  30. actions • mutations を呼び出す 次に当てはまらなければ使わなくてもよい ✓状態を変えるときに非同期処理を入れたい mutations内では非同期処理が使えない ✓複数の状態・mutationsを触りたい mutationsの処理内容は小さくすべき \30

  31. ストアを使う <template> <section class=“container"> <h2>My supreme {{ projectName }} project</h2>

    <sample name=“Hoge" @callme="onCallMe"/> </section> </template> <script> export default { computed: { projectName() { return this.$store.state.vuexsample.projectName } }, methods: { onCallMe: function(callName) { this.$store.commit('vuexsample/change', callName) } } } </script> pages/index.vue
  32. store/vuexsample.js を使う • <script>内で読むとき \32 this.$store.state.vuexsample.projectName • <script>内で書くとき
 
 


    storeを直接変更しない 
 this.$store.state.vuexsample.projectName = callName ͱ͔ this.$store.commit('vuexsample/change', callName) mutationの名前 Nuxtを使うとストアに名前を付けて分割するのが簡単 Vuexの名前空間(namespaced)機能 mutationの引数 stateの名前
  33. store/vuexsample.js を使う • <template>内で読むとき \33 <template> <div> <h2> My supreme

    {{ $store.state.vuexsample.projectName }} project </h2> </div> </template>
  34. 次のページに渡す実装が 簡単になりましたね

  35. 名前を変更する アプリなんか 作らない?

  36. Vuexの使いどころがはっきりした例 • Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件 - https://qiita.com/isamusuzuki/items/ 5ec800e423a3a56ef03d - メニューは全ページに登場する - ページ遷移では開いたメニューが閉じない

    - 「メニューを開いているか」をVuexで管理して、
 ページ遷移でメニューを閉じる \36
  37. “データのバケツリレー”を解決 • Vue.js で初めて SPA を開発する際に考えたこと - https://qiita.com/c-su/items/266552f444489f254e85 データのバケツリレーを解消したい -

    Vuexの使用を検討してください。
  38. ToDo ショッピングカート…

  39. 結局、Vuexは 表示している「状態」 を管理している +簡単に +バグが起きにくいように

  40. これ以外にも 使いどころがありそうです あくまでも一例で

  41. まとめ • 小規模ならVuexを使わなくても問題ない • (例えば)Vuexを使わないと次のページの遷移で
 問題が起きやすい - データのバケツリレー - 状態が正しく設定・反映されない

    • Vuexは表示に関わる「状態」を管理する • Nuxtわかりやすい - Vuexが初めから入っている - ディレクトリで分けられている - 名前空間機能がstoreのファイル名だけで使える \41