Slide 1
Slide 1 text
ԿͰ͔ΜͰStoreʹͿͪࠐ·
ͳ͍Ͱ࣮Λ͢Δ with Vuex
2020.05.20@PWA Night vol.16
Slide 2
Slide 2 text
About me
• Twitter - @_slont
• גࣜձࣾFinatext - Engineer
• Vue.js, Java, Go, Elixir
• ࣗ࡞PWA
Paroty
Slide 3
Slide 3 text
https://medium.com/finatext/composition-api-for-vue3-63631dbadcef https://medium.com/finatext/vue-on-ionic%E3%81%A7web
Slide 4
Slide 4 text
ίτͷൃ
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
શͯStoreͰཧ…ʁ
͍͔ͭഁ͢Δ͜ͱʹݟ͑Δʂʢʁʣ
Slide 7
Slide 7 text
VuexΛ༻͍ͨ
StoreύλʔϯͰͷ࣮Λߟ͑Δ
Slide 8
Slide 8 text
Vuexͱ
• ঢ়ଶཧύλʔϯ + ϥΠϒϥϦ
→ Flux, ReduxͷྲྀΕΛΉ
→ αʔυύʔςΟͰӬଓԽՄೳ
• Vueίϯϙʔωϯτ͔Β$storeܦ༝ͰΞΫηεՄೳ
→ ͜Εάϩʔόϧมͱͯ͠ͷੑ࣭Λ࣋ͭͷͰɺศٓతʹͦ͏ݺͿ
ɹ→ ʮάϩʔόϧม͡Όͳ͍ͩΖ͏͕ʂʯͱ͔ݴΘΕ·͕ͨ͠ɺఆٛͰͳ͘ৼΔ͍ͷͳͷͰແࢹ
Slide 9
Slide 9 text
άϩʔόϧม͕
ԿނΞϯνύλʔͳͷ͔
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
StoreͰͬͪΌ͏ਓͷࢥߟʢໝʣ
• ʮάϩʔόϧͬͯதͰείʔϓΛͬͯΔ͔Βେৎʯ
→ ͋ΔίϯϙʔωϯτείʔϓͰด͡Δ͜ͱ͕Ͱ͖ΔมΛάϩʔόϧʹग़ͯ͠Δ࣌Ͱʢґଘ͕ؔʣີͰ͢
→ είʔϓͷωʔϜεϖʔε͕িಥͨ͠ΒऴΘΔ
• ʮ݁ہAPIͱ͔άϩʔόϧͳͷͰ·ͱΊͨํ͕ྑ͍ʯ
→ ेݸҎ্ͷAPIΛ͏େنͳΞϓϦͩͱstore͕େʹͳͬͯഁ͢Δ
→ ࢲݟ͕ͩɺstoreͱ͍͏໊લΛ༻ͯ͠͠·ͬͨͷ͕ྑ͘ͳ͔ͬͨ
• ʮείʔϓҙࣝ͠ͳͯ͘ྑ͍ͷͰศརʯ
→ ؒҧ͍ͳ͍
→ େنΞϓϦ͡Όͳ͍͔Βʮͨ·ͨ·ʯϝϦοτ͚ͩڗडͰ͖͍ͯΔ͚ͩ
• ʮPropsͷόέπϦϨʔ͕ݏͩʯ
→ Θ͔ΓΈ͕ਂ͍
→ ߏԽɾઃܭ্͕ख͘Ͱ͖͍ͯͳ͍Մೳੑ
Slide 12
Slide 12 text
StoreͰશͯཧύλʔϯ
ʢͦΜͳ͜ͱͨ͠ܦݧ͕ͳ͍ͷͰໝʣ
Slide 13
Slide 13 text
/components/SpecialButton.vue
button.button(:disabled=“disabled”) ΞΫγϣϯ
computed: {
disabled() {
return this.$store.getters[‘page/isDisabled’]
}
}
/store/modules/page.ts
state = {
canOperate: false, // ૢ࡞ݖݶ
hasContent: false // ίϯςϯπ͕͋Δ͔
}
getters = {
isDisabled(s) { // Ϙλϯ͕ඇ׆ੑ͔
return !(s.canOperate && s.hasContent)
}
}
views
┗ Page.vue // ϖʔδίϯϙʔωϯτ
components
┣ Content.vue // Page.vue͔ΒݺΕΔ
┗ SpecialButton.vue // Content.vue͔ΒݺΕΔ
store
┣ modules
┣ ┗ page.ts // Page.vueʹؔ͢Δstore
┗ index.ts
• disabeldpropsͰ͖͢
→ SpecialButton͕storeͷมߋʹґଘ͍ͯ͠Δ
• page.tsͷstateʹ֨ೲ͞ΕΔཻ͕ό
ϥόϥ
→ ΄΅࣮֬ʹωʔϜεϖʔεͷίϯϑϦΫτ͕ى͜Δ
• ଞʹ৭ʑ͋Δׂ͕Ѫ
Slide 14
Slide 14 text
Vuex (Store) ΛͲ͏͏ͷ͔
Slide 15
Slide 15 text
άϩʔόϧมͰ͋Δ͖ͷ & ӬଓԽ
• ʮϩάΠϯϢʔβใʯʮઃఆใʯͳͲͷɺجຊతʹߋ৽͕গͳ
͘ɺͲͷίϯϙʔωϯτͰ͍͘͠ճ͢ඞཁ͕͋ΔσʔλΛ֨ೲ
→ $store.dispatchΛݺΜͰɺaction -> commitͰͦͷ··storeʹ֨ೲͰ͖Δ -> ΄΅ϫϯϥΠϯͰॻ͚Δ
→ جຊతʹࢀরͷΈͷσʔλͩͱɺ֤ίϯϙʔωϯτͰͷมߋʹΑΔίϯϑϦΫτ͕ى͜Γʹ͘͘ɺΑΓอकੑ͕
ߴ͘ͳΔ
• ӬଓԽ͍ͨ͠σʔλʢvuex-persistedstateʣ
→ SPAͰɺॳظԽͷσʔλϑΣονͷ࣌ؒΛͰ͖Δ͚ͩॖ͍ͨ͠߹ -> [Local|Session]StorageʹೖΕ͓͍ͯͯɺ
࣍ճΞΫηε࣌ʹσϑΥϧτͰදࣔͰ͖ΔΑ͏ʹͰ͖Δ
→ ઃఆใͳͲɺAPIΛ࡞ͬͯαʔόͰӬଓԽ͢Δ΄ͲͰͳ͍ͷͰɺLocalStorageӬଓԽ͓ͯ͘͠ͱศར
͜Ε͚ͩʹ͠·͠ΐ͏ʂʂʂ
Slide 16
Slide 16 text
·ͱΊ
StoreύλʔϯΛਖ਼͍͘͜͠ͳͯ͠
UXͷ༏ΕͨΞϓϦΛ࡞Ζ͏ʂ