v-okinawa Vue.js/Nuxt.js meetup #1 初心者歓迎 LT枠で使用
参考URL https://v-okinawa.connpass.com/event/137113
VuexͰԿΛཧ͢Δํ͕ྑ͍ʁגࣜձࣾRe:BuildՅ ါىʢ@kkznchʣ20197݄19ʢۚʣv-okinawa Vue.js/Nuxt.js meetup #1
View Slide
͚͚ͣΜ @kkznchܦྺɾ1990ͷԭೄੜ·Εɾී௨ߴग़ɺླྀେใֶՊग़ɾిྗձࣾͷITΠϯϑϥɺηΩϡϦςΟɾגࣜձࣾRe:BuildͰWebΤϯδχΞझຯɾήʔϜɺΞχϝɺόϨʔϘʔϧɺϐΞϊ࠷ۙͷग़དྷࣄɾਓੜॳͷϐΞϊͷൃදձͰԋ͖ͯͨ͠ɾεϚϒϥSPͷେձʹඋ͑ͯ࿅शத
ࠓ͢͜ͱ• Vuexʹ͍ͭͯ• VuexͰࣦഊ͠·ͨ͠• VuexͰͲΜͳσʔλΛཧ͢Δํ͕Α͍͔
Vuexʹ͍ͭͯ
Vue.js ΞϓϦέʔγϣϯͷͨΊͷঢ়ଶཧύλʔϯ + ϥΠϒϥϦͰ͢※ VuexެࣜαΠτ(https://vuex.vuejs.org/ja) ΑΓ
·ͣVue.jsͷίϯϙʔωϯτؒͷ͠Λߟ͑ͯΈΔ
ίϯϙʔωϯτؒpropsemitͰσʔλΛΓऔΓ
ίϯϙʔωϯτͷ͕૿͑Δͱ
όέπϦϨʔࠈ
Vuexͩͱ
ίϯϙʔωϯτؒͷσʔλͷΓऔΓΛࠜઈ
ίϯϙʔωϯτͱVuexͷΓͱΓʹ
σʔλͷঢ়ଶมԽͷྲྀΕ͕උ͞Ε͍ͯΔ
VuexͰࣦഊ͠·ͨ͠
։ൃલͷࣗΞϓϦͷͯ͢ͷσʔλΛVuexͰཧ͢ΔͱͤʹͳΕͦ͏
։ൃதʢݱࡏʣͷࣗΞϓϦͷͯ͢ͷσʔλΛVuexͰཧ͢ΔͷΊ͓͚ͯ
Whyʁͦͷ1
ετΞʹอ࣋͞ΕͨσʔλΛࢀর͢Δ࠷৽ͷσʔλͰͳ͍
Α͋͘ΔԿ͔͠ΒͷҰཡը໘
Ұཡͷதʹ͋Δσʔλͷৄࡉը໘
ετΞʹอͯ͠ΔσʔλΛఆظతʹߋ৽ͯ͋͛͠ͳ͍ͱݹ͍σʔλΛࢀর͠ଓ͚ͪΌ͏
Whyʁͦͷ2
ϒϥβΛϦϩʔυ͢ΔͱVuexʹอ࣋ͨ͠σʔλফ͑Δ
localStorageʹอଘͯ͠ॳظσʔλੜ࣌ͦ͜Λࢀরͯ͠σʔλফࣦΛճආՄೳ
VuexͰͲΜͳσʔλΛཧ͢Δํ͕Α͍͔
Vuex͏ͱྑͦ͞͏• ΞϓϦͷΞΫηετʔΫϯ• ϚελσʔλͳͲͷߋ৽සͷ͍σʔλ• ༷ʑͳίϯϙʔωϯτ͔Βࢀর͞ΕΔσʔλ
VuexΘͳͯ͘ྑͦ͞͏• شൃੑͷߴ͍σʔλʢτάϧͷON/OFFͱ͔ʣ• ͦͷίϯϙʔωϯτͰ͔͠Θͳ͍σʔλ• ֊͕ബ͍σʔλͷΓऔΓ
·ͱΊ
·ͱΊ• ҆қͳؾ࣋ͪͰVuexΛ͏͔Βͣ• ͏ࡍཧ͢ΔσʔλΛۛຯͯ͠͏͠• Vuexʹ͍ͭͯϕλʔϓϥΫςΟεͱ͔͋Εڭ͍͑ͯͩ͘͞