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

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

slont
May 20, 2020

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

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ӬଓԽ͓ͯ͘͠ͱศར ͜Ε͚ͩʹ͠·͠ΐ͏ʂʂʂ