Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vuexについて
Search
sinpey_g2
October 19, 2017
Technology
0
920
Vuexについて
Vuexについて社内LTで発表したときの資料です
sinpey_g2
October 19, 2017
Tweet
Share
Other Decks in Technology
See All in Technology
MobileActOsaka_250704.pdf
akaitadaaki
0
130
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
3
17k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
2
450
OPENLOGI Company Profile
hr01
0
67k
Geminiとv0による高速プロトタイピング
shinya337
1
270
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
390
いつの間にか入れ替わってる!?新しいAWS Security Hubとは?
cmusudakeisuke
0
130
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.8k
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
270
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
140
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
170
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
336
57k
Optimizing for Happiness
mojombo
379
70k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Side Projects
sachag
455
42k
We Have a Design System, Now What?
morganepeng
53
7.7k
Faster Mobile Websites
deanohume
307
31k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Transcript
Vuexʹ͍ͭͯ !TJOQFZ@H
Vuex ͱ
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.jsͷͭΒ͍ͱ͜ΖΛ ղܾͯ͘͠ΕΔͷ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.js ͷͭΒ͍ͱ͜Ζ
Vue.jsͷσʔλϑϩʔ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.jsͷσʔλϑϩʔ ୯ҰίϯϙʔωϯτͰ͔͠௨༻͠ͳ͍ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vue.jsͷͭΒ͍ͱ͜Ζ ίϯϙʔωϯτؒͰ ঢ়ଶͷڞ༗͕໘
Vue.jsͷͭΒ͍ͱ͜Ζ ࢠ ଙ isUpdated role index props : [
role, isUpdated ] props : [ role ] props : [ role, index, isUpdated ] props : [ role, index, isUpdated ] props : [ isUpdated ] props : [ isUpdated ] ˡΤϥʔ
Vue.jsͷͭΒ͍ͱ͜Ζ wίϯϙʔωϯτ͔Βঢ়ଶͷड͚͠ wଞίϯϙʔωϯτͰঢ়ଶΛڞ༗ ଙɺͻଙ͕૿͑ΔͱQSPQTࠈʹͳΔ ίϯϙʔωϯτͷঢ়ଶมԽΛͰXBUDIͯ͠ৗʹಉظ ͭΒ͗͢Δ
VuexΛ͏ͱ…!
VuexΛ͑͜͏ॻ͚Δ ɾશͯͷίϯϙʔωϯτʹରͯ͠ ɹঢ়ଶΛཧɺڞ༗Ͱ͖Δ ɾࢠؒͰ༨ܭͳঢ়ଶͷ ɹड͚͠Λ͠ͳͯ͘Α͘ͳΔʋ(*´∇ʆ)ů
Vue.jsͷσʔλϑϩʔ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vuexͷσʔλϑϩʔ 'MVY 3FEVY͔ΒͷӨڹΛड͚͍ͯΔ ίϯϙʔωϯτͷ ·ͱ·Γ ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Vuex جຊతͳ͍ํ
Vuex ͍ํ const store = new Vuex.Store({ state: { },
mutations: { }, actions: { } }) // State // Mutation // Action
Vuex ͍ํ State State VuexͷجຊͰ͋Γ࠷େͳཁૉ = ঢ়ଶ
state: { form: { article: { title: '', ogp_title: '',
description: '', keywords: '', main_image: '', }, writers: [], blocks: [], status: Number, should_update: Boolean }, role: String, errors: [], }, Vuex ͍ํ State
Vuex ༻ྫ Mutation Mutation StateΛมߋ͢Δ = ঢ়ଶΛมԽͤ͞Δ MutationҎ֎͕ StateΛมߋ͢Δ͜ͱͰ͖ͳ͍
mutations: { readRole (state, role) { state.role = role },
}, this.$store.commit(‘readRole', ‘staff’) Vuex ༻ྫ Mutation Mutarionͷએݴ ίϯϙʔωϯτͰMutationΛ͏
Vuex ༻ྫ Action Action ඇಉظॲཧΛߦ͏ MutationΛݺͿ StateΛมߋ͢Δ͜ͱͰ͖ͳ͍
Vuex ༻ྫ Action Action MutationͰඇಉظॲཧΛߦΘͳ͍ ඇಉظॲཧ͕ແ͍߹ActionΛ հ͞ͳͯ͘ྑ͍
actions: { saveRole: function(context) { axios.post().then( context.commit(‘saveRole’)) } } methods:
{ saveRole() { this.$store.dispatch('saveRole') } } Vuex ༻ྫ Action Actionͷએݴ ίϯϙʔωϯτ͔ΒActionͷ࣮ߦ
·ͱΊ w7VFYͱ wෳίϯϙʔωϯτͰঢ়ଶͷڞ༗Λศརʹ͢Δͷ wجຊతͳ͍ํ w4UBUF wঢ়ଶΛอ࣋ w.VUBUJPO wঢ়ଶΛมߋ͢Δ w"DUJPO wඇಉظॲཧΛߦ͏
ࢀߟ wެࣜυΩϡϝϯτ IUUQTWVFYWVFKTPSHKB w7VFKTͷίϯϙʔωϯτͱࢠؒσʔλͷૹड৴ ɹ IUUQDIJCJOPXBOFUOPUFWVFKTWVFIUNM