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

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ʹ͍ͭͯϕλʔϓϥΫςΟεͱ͔͋Ε͹ ڭ͍͑ͯͩ͘͞