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

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

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

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

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/
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ページにわたって リンクを貼って受け取る処理を 書きますか？
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