Slide 1
Slide 1 text
「使いどころ」
からはじめるVuex
2018/12/13
fun-tech meetup #7 Webフロントエンド
Masataka Yoshida
Slide 2
Slide 2 text
自己紹介
吉田 匡孝(Masataka Yoshida)
株式会社オープンストリーム 戦略技術推進本部
\2
目に見えるモノを作る + 新しい技術に触れるおしごとがしたいなー
Web
CakePHP, Spring, …
スマートフォンアプリ
Ionic, Objective-C, Java, …
AWS, Python, …
Slide 3
Slide 3 text
はなすこと
• 何でVuexが必要なのか
• Vuexの入門
\3
はなさないこと
• Vue.jsの入門・チュートリアル
• Vuexを用いた状態管理の設計について
Slide 4
Slide 4 text
何でVuexが必要なのか
Slide 5
Slide 5 text
Vue.js便利ですよね
この、データを渡す部分について
\5
My supreme {{ projectName }} project
export default { computed: { projectName() { return 'Nuxt.js' } } }Slide 6
Slide 6 text
Vuex
• Vue.jsを使った事例によく Vuex が出てくる
• Vue.jsドキュメント > スケールアップ > 状態管理
\6
https://jp.vuejs.org/v2/guide/state-management.html
Slide 7
Slide 7 text
Vuexとは？
• 状態管理パターン + ライブラリ
- “状態”管理パターン → カウンターの「数値」
https://vuex.vuejs.org/ja/
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
“Vuexでコレを作りました！”
• Vuex 入門で出てくる例
- ToDoリスト…
- ショッピングカート…
- 検索アプリ…
\9
Slide 10
Slide 10 text
正直、何にVuexを
使えばいいか分からない
Slide 11
Slide 11 text
ある「別」の例から考える
• 名前を書き換えたまま次のページに遷移する
\11
▼
名前を変えるボタン
Slide 12
Slide 12 text
Nuxt.jsを用いて話します
• 新しくプロジェクトを立ち上げる想定
- ページは「pages」
- コンポーネントは「components」
など、所定のディレクトリに置くだけで
機能する
\12
▶
Slide 13
Slide 13 text
コンポーネント(Vue.js)
• この部分は使い回しできるよね
\13
module.exports = {
props: {
name: { default: ‘SAMPLE' }
}
}
import Sample from ‘~/components/
Sample.vue'
export default {
components: { Sample },
methods: {
onCallMe: function(callName) {
this.projectName = callName
}
}
}
pages/index.vue
components/Sample.vue
Load Success! {{ name }} Call me!
Slide 14
Slide 14 text
次のページに渡すには
• Vuexを使わないでこの状態を次のページに渡したい
\14
→Routerのパラメータとして渡す！GETパラメーターなイメージ
go to next
My supreme {{ $route.params.projectName }} project 送り元 受け側 ▶
My supreme {{ $route.params.projectName }} project 送り元 受け側 ▶
Slide 15
Slide 15 text
データの量が増えたらどうしますか？
100ページにわたって
リンクを貼って受け取る処理を
書きますか？
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
そこでVuex
Fuga
Fugaにしろ…
Fugaにしろ…
Fugaにするボタン
がクリックされた！
Slide 18
Slide 18 text
そこでVuex
Fuga
Fugaにしろ…
Fugaにしろ…
Fugaにするボタン
がクリックされた！
Slide 19
Slide 19 text
一つにまとめる？
自分で値の置き場を作れば
面倒くさいVuexは不要では
Slide 20
Slide 20 text
一つにまとめる？
自分で値の置き場を作れば
面倒くさいVuexは不要では
○
Slide 21
Slide 21 text
一つにまとめる？
自分で値の置き場を作れば
面倒くさいVuexは不要では
○
Slide 22
Slide 22 text
https://vuex.vuejs.org/ja/
小規模ならVuexなしで問題ない
Slide 23
Slide 23 text
どうやってデバッグしますか？
その仕組みも自分で作りますか？
https://github.com/vuejs/vue-devtools
Slide 24
Slide 24 text
用意してくれるVuex便利
☺
Slide 25
Slide 25 text
Vuexの入門
Slide 26
Slide 26 text
Vuexのはじめかた
• Vuexをインストールする
• ストアを作る
- 状態を保持する state
- 状態を変更する mutations
- mutationを呼び出すactions
- 他にgetterがある
• ストアを使う
\26
Slide 27
Slide 27 text
Vuexをインストールする
• Nuxt.jsにはVuexが入っている
インストール(ファイル配置・読み込み)の手間がなくなる
• 所定の場所(store/)にストアを置くだけで使えるようになる
• Nuxt.jsを使わない場合でもVuexは使えます
ファイル配置後はVuexを読み込む必要があります(2パターン)
\27
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Nuxt.jsを使いましょう
Slide 28
Slide 28 text
ストアを作る
\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の名前と
変更処理の内容
Slide 29
Slide 29 text
あれ？ actions は？？
Slide 30
Slide 30 text
actions
• mutations を呼び出す
次に当てはまらなければ使わなくてもよい
✓状態を変えるときに非同期処理を入れたい
mutations内では非同期処理が使えない
✓複数の状態・mutationsを触りたい
mutationsの処理内容は小さくすべき
\30
Slide 31
Slide 31 text
ストアを使う
My supreme {{ projectName }} project
export default { computed: { projectName() { return this.$store.state.vuexsample.projectName } }, methods: { onCallMe: function(callName) { this.$store.commit('vuexsample/change', callName) } } } pages/index.vueSlide 32
Slide 32 text
store/vuexsample.js を使う
• 内で読むとき
\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の名前
Slide 33
Slide 33 text
store/vuexsample.js を使う
• 内で読むとき
\33
My supreme {{ $store.state.vuexsample.projectName }} project
Slide 34
Slide 34 text
次のページに渡す実装が
簡単になりましたね
Slide 35
Slide 35 text
名前を変更する
アプリなんか
作らない？
Slide 36
Slide 36 text
Vuexの使いどころがはっきりした例
• Nuxt.jsにBulmaを組み込んだら、Vuexストアが理解できた件
- https://qiita.com/isamusuzuki/items/
5ec800e423a3a56ef03d
- メニューは全ページに登場する
- ページ遷移では開いたメニューが閉じない
- 「メニューを開いているか」をVuexで管理して、
ページ遷移でメニューを閉じる
\36
Slide 37
Slide 37 text
“データのバケツリレー”を解決
• Vue.js で初めて SPA を開発する際に考えたこと
- https://qiita.com/c-su/items/266552f444489f254e85
データのバケツリレーを解消したい
- Vuexの使用を検討してください。
Slide 38
Slide 38 text
ToDo
ショッピングカート…
Slide 39
Slide 39 text
結局、Vuexは
表示している「状態」
を管理している
+簡単に
+バグが起きにくいように
Slide 40
Slide 40 text
これ以外にも
使いどころがありそうです
あくまでも一例で
Slide 41
Slide 41 text
まとめ
• 小規模ならVuexを使わなくても問題ない
• (例えば)Vuexを使わないと次のページの遷移で
問題が起きやすい
- データのバケツリレー
- 状態が正しく設定・反映されない
• Vuexは表示に関わる「状態」を管理する
• Nuxtわかりやすい
- Vuexが初めから入っている
- ディレクトリで分けられている
- 名前空間機能がstoreのファイル名だけで使える
\41