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

by kkznch

Slide 1

Slide 1 text

VuexͰ ԿΛ؅ཧ͢Δํ͕ྑ͍ʁ גࣜձࣾRe:Build Յ਺ ါىʢ@kkznchʣ 2019೥7݄19೔ʢۚʣ v-okinawa Vue.js/Nuxt.js meetup #1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Vuexʹ͍ͭͯ

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

όέπϦϨʔ஍ࠈ

Slide 10

Slide 10 text

Vuexͩͱ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

ίϯϙʔωϯτͱVuexͷ΍ΓͱΓʹ஫໨

Slide 13

Slide 13 text

σʔλͷঢ়ଶมԽͷྲྀΕ͕੔උ͞Ε͍ͯΔ

Slide 14

Slide 14 text

VuexͰࣦഊ͠·ͨ͠

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Whyʁͦͷ1

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Ұཡͷதʹ͋Δσʔλͷৄࡉը໘

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Whyʁͦͷ2

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

·ͱΊ

Slide 29

Slide 29 text

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