Vuexで覚える状態管理

Transcript

1. Vuex で覚える状態管理 Vuex で覚える状態管理 arm4
2. 今日、話すこと 今日、話すこと Vuex って何？ 既存プロジェクトではこうでした Vuex を使うとこうなるよ Laravel での導入手順 つまり状態管理って何？ その他
3. Vuex って何？ Vuex って何？
4. と、説明に入るその前に、 コードから見ていきましょう！ そうじゃないと説明が難しくて頭に入らないからね！
5. 既存プロジェクトではこうで 既存プロジェクトではこうで した した
6. 親から子へデータを渡す 親から子へデータを渡す 親から子へデータを渡す際はprops といって、親のコ ンポーネントにカスタム属性を設定し、 それを子コンポーネントに設定したprops オプション で受け取るという手法を使います。
7. 親コンポーネントであるProductList から、 子コンポーネントであるProduct にそれぞれの商品デ ータを渡す場合
8. 親コンポーネント 親コンポーネント resources/assets/js/components/ProductList.vue <template> <div id="product-list" class="row"> <div class="col-md-8 col-md-offset-2"> <product v-for="product in productList" :product="product </div> </div> </template> <script> import Product from './Product.vue' export default { components: { Product, },
9. 子コンポーネント 子コンポーネント resources/assets/js/components/Product.vue <template> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-6">{{ product.name }}</div> <div class="col-md-6 text-right"> 価格 {{ product.price }}円 <button class="btn btn-default"><i class="fas fa-c </div> </div> </div> </div> </template> <script>
10. 子から親へデータを渡す 子から親へデータを渡す 子から親へデータを渡す場合は、子で$emit を使いカ スタムイベントを発火させ、 親のテンプレート側の子コンポーネントのタグでv- on を使ってカスタムイベントをリッスンしデータを 渡す。
11. 子コンポーネントであるProduct から、 親コンポーネントであるProductList に選択した商品 数とその値段を渡す場合
12. 子コンポーネント 子コンポーネント resources/assets/js/components/Product.vue <template> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-6">{{ product.name }}</div> <div class="col-md-6 text-right"> 価格 {{ product.price }}円 <button class="btn btn-default" @click="add"><i c </div> </div> </div> </div> </template> <script>
13. 親コンポーネント 親コンポーネント resources/assets/js/components/ProductList.vue <template> <div id="product-list" class="row"> <div class="col-md-8 col-md-offset-2"> <product v-for="product in productList" :product="product <div class="text-right">合計点数 {{ total.count }}点 合計 { </div> </div> </template> <script> import Product from './Product.vue' export default { components: { Product, }
14. 親子じゃないコンポーネントにデータ 親子じゃないコンポーネントにデータ を渡す を渡す event bus という概念を使って、 グローバル領域にあるオブジェクトのインスタンスで イベントの発火を行い それをそれぞれのコンポーネントがリッスンすること でデータをやりとりする。
15. コンポーネントProduct から コンポーネントCartLabel へ選択した商品数とその値 段を渡す場合
16. app.js app.js require('./bootstrap'); window.Vue = require('vue'); import ProductList from './components/ProductList.vue' import CartLabel from './components/CartLabel.vue' const app = new Vue({ el: '#app', components: { ProductList, CartLabel, }, });
17. コンポーネントProduct コンポーネントProduct resources/assets/js/components/Product.vue <template> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-6">{{ product.name }}</div> <div class="col-md-6 text-right"> 価格 {{ product.price }}円 <button class="btn btn-default" @click="add"><i c </div> </div> </div> </div> </template> <script>
18. コンポーネントCartLabel コンポーネントCartLabel resources/assets/js/components/CartLabel.vue <template> <a class="btn btn-default" href="#"> <i class="fas fa-shopping-cart"></i> <span class="badge b </a> </template> <script> export default { data() { return { count: 0, price: 0, } }, created() {
19. コンポーネントProductList コンポーネントProductList resources/assets/js/components/ProductList.vue <template> <div id="product-list" class="row"> <div class="col-md-8 col-md-offset-2"> <product v-for="product in productList" :product="product <div class="text-right">合計点数 {{ total.count }}点 合計 { </div> </div> </template> <script> import Product from './Product.vue' export default { components: { Product, }
20. ▼それぞれのデータ受け渡しを理解するのに参考にな るページ https://kuroeveryday.blogspot.jp/2016/10/vuejs- components-emit-events.html
21. この程度のコンポーネント構造とイベント数であれ ば、そこまで複雑ではないし 「ボタン押したら2 つのコンポーネントにデータを渡 すのね」と覚えていられます。 が が このコンポーネント数が20 個になって、イベントが 15 個になったときのことを想像してみてください。
23. こうなります。
24. Vuex って何？ Vuex って何？
25. 戻ってきました。 いわゆるFlux フレームワークの１つで、 Vue.js で作成するアプリケーションの状態を管理する ためのフレームワーク。
26. Flux ？ Flux ？
27. Facebook 社が提唱した設計思想。 矢印が一方向になることによって、デバッグがしやす くなりメンテナンス性が上がるという思想。
28. え？ 逆に複雑そうじゃね？（小声）
29. あの図は偉い人用だから普通の人用に書き換えます
30. Action が呼ばれる ↓ Store の値が変わる ↓ View が書き換わる
31. Vuex 以外にもFlux フレームワークはた Vuex 以外にもFlux フレームワークはた くさんある くさんある Redux, Flux-utils, MobX
32. では、なぜVuex なのか？ では、なぜVuex なのか？
33. Vue.js のリアクティブシステムを利用することによ りView の効率的な更新を可能にしている 手順がRedux より少なく、単純で分かりやすい Chrome の開発ツールでVuex の状態変化をステッ プごとに確認できる
34. 具体的に何がうれしいの？ 具体的に何がうれしいの？
35. コンポーネントが共有しているdata を抽出し、それ をグローバルな唯一無二のデータとして管理でき る！！
36. さっきの例だと、 ProductList.vue にもCartLabel.vue にも count とprice があり、 これをイベントで両方更新しに行っている。 どちらかに何かがあってバグっていると、 本来は同一でなければいけないデータに差が。。
37. 要は、関係してるコンポーネ 要は、関係してるコンポーネ ントを覚えてないといけなく ントを覚えてないといけなく てバグりやすい てバグりやすい
38. グローバルな領域にあるcount とprice をそれぞれのコ ンポーネントが読みに行ったり、 変更したりすればいいじゃないの！ そう思いませんか？ そう思いませんか？
39. そう、つまりそれがVuex
40. Vuex を使うとこうなるよ Vuex を使うとこうなるよ
41. それぞれのコンポーネントでは共通で使うデー それぞれのコンポーネントでは共通で使うデー タを読み込んで、それを更新するミューテーシ タを読み込んで、それを更新するミューテーシ ョンを呼ぶだけ ョンを呼ぶだけ
42. 共通で使うデータやそれを更新するメソッドは new Vuex.Store でインスタンス化しておく const store = new Vuex.Store({ state: { total: { count: 0, price: 0, }, productList: [ { name: ' ', price: 140, onSale: true, }, { name: ' ', price: 300, onSale: true
43. app.js app.js require('./bootstrap'); window.Vue = require('vue'); import Vuex from 'vuex' Vue.use(Vuex) import store from './store/vuex' import VxProductList from './components/VxProductList.vue' import VxCartLabel from './components/VxCartLabel.vue' const vxApp = new Vue({ el: '#app', store
44. コンポーネントVxProduct コンポーネントVxProduct resources/assets/js/components/VxProduct.vue this.$store はVuex ストアのインスタンス <template> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-6">{{ product.name }}</div> <div class="col-md-6 text-right"> 価格 {{ product.price }}円 <button class="btn btn-default" @click="add"><i c </div> </div> </div> </div> </template> <script>
45. コンポーネントVxCartLabel コンポーネントVxCartLabel resources/assets/js/components/VxCartLabel.vue this.$store はVuex ストアのインスタンス <template> <a class="btn btn-default" href="#"> <i class="fas fa-shopping-cart"></i> <span class="badge b </a> </template> <script> import { mapState } from 'vuex' export default { computed: { total() { return this.$store.state.total; }, }, }
46. コンポーネントVxProductList コンポーネントVxProductList resources/assets/js/components/VxProductList.vue this.$store はVuex ストアのインスタンス <template> <div id="product-list" class="row"> <div class="col-md-8 col-md-offset-2"> <vx-product v-for="product in productList" :product="produ <div class="text-right">合計点数 {{ total.count }}点 合計 { </div> </div> </template> <script> import { mapState, mapGetters } from 'vuex' import VxProduct from './VxProduct.vue' export default { components: { VxProduct
47. 今回は触れなかったけど、mapState とか mapMutations という便利なメソッドを使うと、さら に簡潔にコードが書けます。
48. Laravel での導入手順 Laravel での導入手順
49. vuex をインストール vuex をインストール npm install vuex --save
50. app.js に以下の2 行を追加 app.js に以下の2 行を追加 import Vuex from 'vuex' Vue.use(Vuex)
51. store を作成する store を作成する ※ 事前にVue とVuex を読み込んでおく(require or import) 必要があります。 const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 状態 変更 state.count++ } } })
52. Vue のルートインスタンスにstore オプ Vue のルートインスタンスにstore オプ ションを追加 ションを追加 ※ ここで store, となっているのは、ECMAScript 2015 で 変数名とオブジェクトのkey 名が同一の場合は省略できるという文法が追加になったためであり、 省略しない表記は store: store, です。 ※ store オプションのvalue にはVuex ストアのインスタンスを渡す必要があるので、ストアのインスタンス 生成はVue のルートインスタンスより前に行っておく必要があります。 const app = new Vue({ el: '#app', store, components: { VxProductList, VxCartLabel, }, });
53. 要するに、簡単！ 要するに、簡単！
54. つまり状態管理って何？ つまり状態管理って何？
55. 状態 = state = data 状態 = state = data
56. data をなぜstate と言い換えた？ data をなぜstate と言い換えた？
57. data のとある状態を参照してるよ！ってこと
58. 管理 = management = 整理してコントロール
59. 今までdata の状態はいろんなコンポーネントに内包 されていて、それを変更するメソッドも分散しカオス っていました。
60. それを共通のストアで管理し、 一方向の流れでデータを変更していくことで整理整頓 された美しい世界を作る。
61. つまり、それが... That's 状態管理 That's 状態管理
62. 【個人的な感想】 【個人的な感想】 js だろうが何だろうが、やっぱMVC が分かりやすいん じゃないそうなんじゃない？ それに近づけたのがFlux なんじゃない？ 違うの？そうでしょ？
63. その他 その他
64. ▼公式ドキュメント（日本語訳版） https://vuex.vuejs.org/ja/
65. ▼私が書いたLaravel+Vuex+Vue のサンプルコード ※ Vx のpre x ついてるコンポーネントのファイルがvuex 版 ※ assets/js/store にjs をModule 化して分けて入れたり、mutations などのプロパティ別でファイルを分け て整理するとかするといいかもしれない。 https://github.com/fromarm4/vuex_study
66. ▼Vuex を利用したVue アプリケーションのサンプル コードたち https://github.com/vuejs/vuex/tree/dev/examples
67. ご清聴ありがとうございまし ご清聴ありがとうございまし た！ た！