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

Vuexで何を管理する方が良い?/What is better to store in Vuex?

0451a8e214a5c0ddffd489528adbf787?s=47 kkznch
July 19, 2019

Vuexで何を管理する方が良い?/What is better to store in Vuex?

v-okinawa Vue.js/Nuxt.js meetup #1 初心者歓迎
LT枠で使用

参考URL
https://v-okinawa.connpass.com/event/137113

0451a8e214a5c0ddffd489528adbf787?s=128

kkznch

July 19, 2019
Tweet

Transcript

  1. VuexͰ ԿΛ؅ཧ͢Δํ͕ྑ͍ʁ גࣜձࣾRe:Build Յ਺ ါىʢ@kkznchʣ 2019೥7݄19೔ʢۚʣ v-okinawa Vue.js/Nuxt.js meetup #1

  2. ͚͚ͣΜ @kkznch ܦྺ ɾ1990೥ͷԭೄੜ·Ε ɾී௨ߴग़਎ɺླྀେ৘ใ޻ֶՊग़਎ ɾిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟ ɾגࣜձࣾRe:BuildͰWebΤϯδχΞ झຯ ɾήʔϜɺΞχϝɺόϨʔϘʔϧɺϐΞϊ ࠷ۙͷग़དྷࣄ

    ɾਓੜॳͷϐΞϊͷൃදձͰԋ૗͖ͯͨ͠ ɾεϚϒϥSPͷେձʹඋ͑ͯ࿅शத
  3. ࠓ೔࿩͢͜ͱ • Vuexʹ͍ͭͯ • VuexͰࣦഊ͠·ͨ͠ • VuexͰͲΜͳσʔλΛ؅ཧ͢Δํ͕Α͍͔

  4. Vuexʹ͍ͭͯ

  5. Vue.js ΞϓϦέʔγϣϯͷͨΊͷ ঢ়ଶ؅ཧύλʔϯ + ϥΠϒϥϦͰ͢ ※ VuexެࣜαΠτ(https://vuex.vuejs.org/ja) ΑΓ

  6. ·ͣVue.jsͷίϯϙʔωϯτؒͷ ஋౉͠Λߟ͑ͯΈΔ

  7. ίϯϙʔωϯτؒ͸props΍emitͰσʔλΛ΍ΓऔΓ

  8. ίϯϙʔωϯτͷ਺͕૿͑Δͱ

  9. όέπϦϨʔ஍ࠈ

  10. Vuexͩͱ

  11. ίϯϙʔωϯτؒͷσʔλͷ΍ΓऔΓΛࠜઈ

  12. ίϯϙʔωϯτͱVuexͷ΍ΓͱΓʹ஫໨

  13. σʔλͷঢ়ଶมԽͷྲྀΕ͕੔උ͞Ε͍ͯΔ

  14. VuexͰࣦഊ͠·ͨ͠

  15. ։ൃલͷࣗ෼ ΞϓϦ಺ͷ͢΂ͯͷσʔλΛ VuexͰ؅ཧ͢Δͱ޾ͤʹͳΕͦ͏

  16. ։ൃதʢݱࡏʣͷࣗ෼ ΞϓϦ಺ͷ͢΂ͯͷσʔλΛ VuexͰ؅ཧ͢Δͷ͸΍Ί͓͚ͯ

  17. Whyʁͦͷ1

  18. ετΞʹอ࣋͞ΕͨσʔλΛ ࢀর͢Δ΋࠷৽ͷσʔλͰ͸ͳ͍

  19. Α͋͘ΔԿ͔͠ΒͷҰཡը໘

  20. Ұཡͷதʹ͋Δσʔλͷৄࡉը໘

  21. ετΞʹอ؅ͯ͠ΔσʔλΛ ఆظతʹߋ৽ͯ͋͛͠ͳ͍ͱ ݹ͍σʔλΛࢀর͠ଓ͚ͪΌ͏

  22. Whyʁͦͷ2

  23. ϒϥ΢βΛϦϩʔυ͢Δͱ Vuexʹอ࣋ͨ͠σʔλফ͑Δ

  24. localStorageʹอଘͯ͠ ॳظσʔλੜ੒࣌͸ͦ͜Λ ࢀরͯ͠σʔλফࣦΛճආՄೳ

  25. VuexͰͲΜͳσʔλΛ ؅ཧ͢Δํ͕Α͍͔

  26. Vuex࢖͏ͱྑͦ͞͏ • ΞϓϦͷΞΫηετʔΫϯ • ϚελσʔλͳͲͷߋ৽ස౓ͷ௿͍σʔλ • ༷ʑͳίϯϙʔωϯτ͔Βࢀর͞ΕΔσʔλ

  27. Vuex࢖Θͳͯ͘΋ྑͦ͞͏ • شൃੑͷߴ͍σʔλʢτάϧͷON/OFFͱ ͔ʣ • ͦͷίϯϙʔωϯτͰ͔͠࢖Θͳ͍σʔλ • ֊૚͕ബ͍σʔλͷ΍ΓऔΓ

  28. ·ͱΊ

  29. ·ͱΊ • ҆қͳؾ࣋ͪͰVuexΛ࢖͏΂͔Βͣ • ࢖͏ࡍ͸؅ཧ͢ΔσʔλΛۛຯͯ͠࢖͏΂͠ • Vuexʹ͍ͭͯϕλʔϓϥΫςΟεͱ͔͋Ε͹ ڭ͍͑ͯͩ͘͞