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 full-size slide

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

    View full-size slide

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

    View full-size slide

  4. Vuexʹ͍ͭͯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. όέπϦϨʔ஍ࠈ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. VuexͰࣦഊ͠·ͨ͠

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide