Slide 1
Slide 1 text
Vuexʹ͍ͭͯ
!TJOQFZ@H
Slide 2
Slide 2 text
Vuex ͱ
Slide 3
Slide 3 text
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Slide 4
Slide 4 text
Vue.jsͷͭΒ͍ͱ͜ΖΛ
ղܾͯ͘͠ΕΔͷ
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Slide 5
Slide 5 text
Vue.js ͷͭΒ͍ͱ͜Ζ
Slide 6
Slide 6 text
Vue.jsͷσʔλϑϩʔ
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Slide 7
Slide 7 text
Vue.jsͷσʔλϑϩʔ
୯ҰίϯϙʔωϯτͰ͔͠௨༻͠ͳ͍
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Slide 8
Slide 8 text
Vue.jsͷͭΒ͍ͱ͜Ζ
ίϯϙʔωϯτؒͰ
ঢ়ଶͷڞ༗͕໘
Slide 9
Slide 9 text
Vue.jsͷͭΒ͍ͱ͜Ζ
ࢠ
ଙ
isUpdated
role
index
props : [
role,
isUpdated
]
props : [
role
]
props : [
role,
index,
isUpdated
]
props : [
role,
index,
isUpdated
]
props : [
isUpdated
]
props : [
isUpdated
]
ˡΤϥʔ
Slide 10
Slide 10 text
Vue.jsͷͭΒ͍ͱ͜Ζ
wίϯϙʔωϯτ͔Βঢ়ଶͷड͚͠
wଞίϯϙʔωϯτͰঢ়ଶΛڞ༗
ଙɺͻଙ͕૿͑ΔͱQSPQTࠈʹͳΔ
ίϯϙʔωϯτͷঢ়ଶมԽΛͰXBUDIͯ͠ৗʹಉظ
ͭΒ͗͢Δ
Slide 11
Slide 11 text
VuexΛ͏ͱ…!
Slide 12
Slide 12 text
VuexΛ͑͜͏ॻ͚Δ
ɾશͯͷίϯϙʔωϯτʹରͯ͠
ɹঢ়ଶΛཧɺڞ༗Ͱ͖Δ
ɾࢠؒͰ༨ܭͳঢ়ଶͷ
ɹड͚͠Λ͠ͳͯ͘Α͘ͳΔʋ(*´∇ʆ)ů
Slide 13
Slide 13 text
Vue.jsͷσʔλϑϩʔ
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Slide 14
Slide 14 text
Vuexͷσʔλϑϩʔ
'MVY
3FEVY͔ΒͷӨڹΛड͚͍ͯΔ
ίϯϙʔωϯτͷ
·ͱ·Γ
ग़యIUUQTWVFYWVFKTPSHKBJOUSPIUNM
Slide 15
Slide 15 text
Vuex جຊతͳ͍ํ
Slide 16
Slide 16 text
Vuex ͍ํ
const store = new Vuex.Store({
state: {
},
mutations: {
},
actions: {
}
})
// State
// Mutation
// Action
Slide 17
Slide 17 text
Vuex ͍ํ State
State
VuexͷجຊͰ͋Γ࠷େͳཁૉ
= ঢ়ଶ
Slide 18
Slide 18 text
state: {
form: {
article: {
title: '',
ogp_title: '',
description: '',
keywords: '',
main_image: '',
},
writers: [],
blocks: [],
status: Number,
should_update: Boolean
},
role: String,
errors: [],
},
Vuex ͍ํ State
Slide 19
Slide 19 text
Vuex ༻ྫ Mutation
Mutation
StateΛมߋ͢Δ = ঢ়ଶΛมԽͤ͞Δ
MutationҎ֎͕
StateΛมߋ͢Δ͜ͱͰ͖ͳ͍
Slide 20
Slide 20 text
mutations: {
readRole (state, role) {
state.role = role
},
},
this.$store.commit(‘readRole', ‘staff’)
Vuex ༻ྫ Mutation
Mutarionͷએݴ
ίϯϙʔωϯτͰMutationΛ͏
Slide 21
Slide 21 text
Vuex ༻ྫ Action
Action
ඇಉظॲཧΛߦ͏
MutationΛݺͿ
StateΛมߋ͢Δ͜ͱͰ͖ͳ͍
Slide 22
Slide 22 text
Vuex ༻ྫ Action
Action
MutationͰඇಉظॲཧΛߦΘͳ͍
ඇಉظॲཧ͕ແ͍߹ActionΛ
հ͞ͳͯ͘ྑ͍
Slide 23
Slide 23 text
actions: {
saveRole: function(context) {
axios.post().then(
context.commit(‘saveRole’))
}
}
methods: {
saveRole() {
this.$store.dispatch('saveRole')
}
}
Vuex ༻ྫ Action
Actionͷએݴ
ίϯϙʔωϯτ͔ΒActionͷ࣮ߦ
Slide 24
Slide 24 text
·ͱΊ
w7VFYͱ
wෳίϯϙʔωϯτͰঢ়ଶͷڞ༗Λศརʹ͢Δͷ
wجຊతͳ͍ํ
w4UBUF
wঢ়ଶΛอ࣋
w.VUBUJPO
wঢ়ଶΛมߋ͢Δ
w"DUJPO
wඇಉظॲཧΛߦ͏
Slide 25
Slide 25 text
ࢀߟ
wެࣜυΩϡϝϯτ IUUQTWVFYWVFKTPSHKB
w7VFKTͷίϯϙʔωϯτͱࢠؒσʔλͷૹड৴
ɹ IUUQDIJCJOPXBOFUOPUFWVFKTWVFIUNM