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
Four Keysから始める信頼性の改善 - SRE NEXT 2025
ozakikota
0
410
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
470
AWS 怖い話 WAF編 @fillz_noh #AWSStartup #AWSStartup_Kansai
fillznoh
0
130
shake-upを科学する
rsakata
7
1k
ClaudeCode_vs_GeminiCLI_Terraformで比較してみた
tkikuchi
1
1k
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
4
2.9k
microCMSではじめるAIライティング
himaratsu
0
150
Rethinking Incident Response: Context-Aware AI in Practice
rrreeeyyy
2
940
今だから言えるセキュリティLT_Wordpress5.7.2未満を一斉アップデートせよ
cuebic9bic
2
170
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
3
210
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
ソフトウェアテストのAI活用_ver1.25
fumisuke
1
610
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A designer walks into a library…
pauljervisheath
207
24k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Become a Pro
speakerdeck
PRO
29
5.4k
Producing Creativity
orderedlist
PRO
346
40k
Done Done
chrislema
184
16k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Designing Experiences People Love
moore
142
24k
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