何でもかんでもStoreにぶち込まないで実装をする話 with Vuex

Transcript

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