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