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

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

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

kkznch

July 19, 2019
Tweet

More Decks by kkznch

Other Decks in Technology

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