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

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