Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for slont slont
May 20, 2020

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

Avatar for slont

slont

May 20, 2020
Tweet

More Decks by slont

Other Decks in Programming

Transcript

  1. About me • Twitter - @_slont • גࣜձࣾFinatext - Engineer

    • Vue.js, Java, Go, Elixir • ࣗ࡞PWA Paroty
  2. Vuexͱ͸ • ঢ়ଶ؅ཧύλʔϯ + ϥΠϒϥϦ → Flux, ReduxͷྲྀΕΛ἞Ή → αʔυύʔςΟͰӬଓԽ΋Մೳ

    • Vueίϯϙʔωϯτ͔Β$storeܦ༝ͰΞΫηεՄೳ → ͜Ε͸άϩʔόϧม਺ͱͯ͠ͷੑ࣭Λ࣋ͭͷͰɺศٓతʹͦ͏ݺͿ ɹ→ ʮάϩʔόϧม਺͡Όͳ͍ͩΖ͏͕ʂʯͱ͔ݴΘΕ·͕ͨ͠ɺఆٛͰ͸ͳ͘ৼΔ෣͍ͷ࿩ͳͷͰແࢹ
  3. StoreͰ΍ͬͪΌ͏ਓͷࢥߟʢໝ૝ʣ • ʮάϩʔόϧͬͯ΋தͰείʔϓΛ੾ͬͯΔ͔Βେৎ෉ʯ → ͋Δίϯϙʔωϯτ಺είʔϓͰด͡Δ͜ͱ͕Ͱ͖Δม਺Λάϩʔόϧʹग़ͯ͠Δ࣌఺Ͱʢґଘؔ܎͕ʣີͰ͢ → είʔϓͷωʔϜεϖʔε͕িಥͨ͠ΒऴΘΔ • ʮ݁ہAPIͱ͔΋άϩʔόϧͳͷͰ·ͱΊͨํ͕ྑ͍ʯ →

    ਺ेݸҎ্ͷAPIΛ࢖͏େن໛ͳΞϓϦͩͱstore͕๲େʹͳͬͯഁ୼͢Δ → ࢲݟ͕ͩɺstoreͱ͍͏໊લΛ࢖༻ͯ͠͠·ͬͨͷ͕ྑ͘ͳ͔ͬͨ • ʮείʔϓҙࣝ͠ͳͯ͘ྑ͍ͷͰศརʯ → ؒҧ͍ͳ͍ → େن໛ΞϓϦ͡Όͳ͍͔Βʮͨ·ͨ·ʯϝϦοτ͚ͩڗडͰ͖͍ͯΔ͚ͩ • ʮPropsͷόέπϦϨʔ͕ݏͩʯ → Θ͔ΓΈ͕ਂ͍ → ߏ଄Խɾઃܭ্͕ख͘Ͱ͖͍ͯͳ͍Մೳੑ
  4. /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ʹ֨ೲ͞ΕΔཻ౓͕ό ϥόϥ → ΄΅࣮֬ʹωʔϜεϖʔεͷίϯϑϦΫτ͕ى͜Δ • ଞʹ΋৭ʑ͋Δׂ͕Ѫ
  5. άϩʔόϧม਺Ͱ͋Δ΂͖΋ͷ & ӬଓԽ • ʮϩάΠϯϢʔβ৘ใʯʮ୺຤಺ઃఆ৘ใʯͳͲͷɺجຊతʹߋ৽͕গͳ ͘ɺͲͷίϯϙʔωϯτͰ΋౳͘͠࢖͍ճ͢ඞཁ͕͋ΔσʔλΛ֨ೲ → $store.dispatchΛݺΜͰɺaction -> commitͰͦͷ··storeʹ֨ೲͰ͖Δ

    -> ΄΅ϫϯϥΠϯͰॻ͚Δ → جຊతʹࢀরͷΈͷσʔλͩͱɺ֤ίϯϙʔωϯτͰͷมߋʹΑΔίϯϑϦΫτ͕ى͜Γʹ͘͘ɺΑΓอकੑ͕ ߴ͘ͳΔ • ӬଓԽ͍ͨ͠σʔλʢvuex-persistedstateʣ → SPAͰɺॳظԽͷσʔλϑΣονͷ࣌ؒΛͰ͖Δ͚ͩ୹ॖ͍ͨ͠৔߹ -> [Local|Session]StorageʹೖΕ͓͍ͯͯɺ ࣍ճΞΫηε࣌ʹ΋σϑΥϧτͰදࣔͰ͖ΔΑ͏ʹͰ͖Δ → ୺຤಺ઃఆ৘ใͳͲ͸ɺAPIΛ࡞ͬͯαʔόͰӬଓԽ͢Δ΄ͲͰ΋ͳ͍ͷͰɺLocalStorageӬଓԽ͓ͯ͘͠ͱศར ͜Ε͚ͩʹ͠·͠ΐ͏ʂʂʂ