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
   

   View Slide

2. ͚͚ͣΜ @kkznch
   ܦྺ
   ɾ1990೥ͷԭೄੜ·Ε
   ɾී௨ߴग़਎ɺླྀେ৘ใ޻ֶՊग़਎
   ɾిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟ
   ɾגࣜձࣾRe:BuildͰWebΤϯδχΞ
   झຯ
   ɾήʔϜɺΞχϝɺόϨʔϘʔϧɺϐΞϊ
   ࠷ۙͷग़དྷࣄ
   ɾਓੜॳͷϐΞϊͷൃදձͰԋ૗͖ͯͨ͠
   ɾεϚϒϥSPͷେձʹඋ͑ͯ࿅शத
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   • Vuexʹ͍ͭͯ
   • VuexͰࣦഊ͠·ͨ͠
   • VuexͰͲΜͳσʔλΛ؅ཧ͢Δํ͕Α͍͔
   

   View Slide

4. Vuexʹ͍ͭͯ
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. όέπϦϨʔ஍ࠈ
   

   View Slide

10. Vuexͩͱ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. VuexͰࣦഊ͠·ͨ͠
    

    View Slide

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

    View Slide

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

    View Slide

17. Whyʁͦͷ1
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Whyʁͦͷ2
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. ·ͱΊ
    

    View Slide

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

    View Slide