Vuexについて

Vuexについて社内LTで発表したときの資料です

Transcript

1. Vuexʹ͍ͭͯ !TJOQFZ@H
2. Vuex ͱ͸
3. ग़య
   
   IUUQTWVFYWVFKTPSHKBJOUSPIUNM
4. Vue.jsͷͭΒ͍ͱ͜ΖΛ ղܾͯ͘͠ΕΔ΋ͷ ग़య
   
   IUUQTWVFYWVFKTPSHKBJOUSPIUNM
5. Vue.js ͷͭΒ͍ͱ͜Ζ
6. Vue.jsͷσʔλϑϩʔ ग़య
   
   IUUQTWVFYWVFKTPSHKBJOUSPIUNM
7. Vue.jsͷσʔλϑϩʔ ୯ҰίϯϙʔωϯτͰ͔͠௨༻͠ͳ͍ ग़య
   
   IUUQTWVFYWVFKTPSHKBJOUSPIUNM
8. Vue.jsͷͭΒ͍ͱ͜Ζ ίϯϙʔωϯτؒͰ ঢ়ଶͷڞ༗͕໘౗
9. Vue.jsͷͭΒ͍ͱ͜Ζ ਌ ࢠ ଙ isUpdated role index props : [ role, isUpdated ] props : [ role ] props : [ role, index, isUpdated ] props : [ role, index, isUpdated ] props : [ isUpdated ] props : [ isUpdated ] ˡ
   Τϥʔ
10. Vue.jsͷͭΒ͍ͱ͜Ζ w਌ίϯϙʔωϯτ͔Βঢ়ଶͷड͚౉͠ wଞίϯϙʔωϯτͰঢ়ଶΛڞ༗ ଙɺͻଙ͕૿͑ΔͱQSPQT஍ࠈʹͳΔ ίϯϙʔωϯτͷঢ়ଶมԽΛ਌ͰXBUDIͯ͠ৗʹಉظ ͭΒ͗͢Δ
11. VuexΛ࢖͏ͱ…!
12. VuexΛ࢖͑͹͜͏ॻ͚Δ ɾશͯͷίϯϙʔωϯτʹରͯ͠ ɹঢ়ଶΛ؅ཧɺڞ༗Ͱ͖Δ ɾ਌ࢠؒͰ༨ܭͳঢ়ଶͷ ɹड͚౉͠Λ͠ͳͯ͘Α͘ͳΔʋ(*´∇ʆ)ů
13. Vue.jsͷσʔλϑϩʔ ग़య
    
    IUUQTWVFYWVFKTPSHKBJOUSPIUNM
14. Vuexͷσʔλϑϩʔ 'MVY
    3FEVY͔ΒͷӨڹΛड͚͍ͯΔ ίϯϙʔωϯτͷ
    ·ͱ·Γ ग़య
    
    IUUQTWVFYWVFKTPSHKBJOUSPIUNM
15. Vuex جຊతͳ࢖͍ํ
16. Vuex ࢖͍ํ const store = new Vuex.Store({ state: { }, mutations: { }, actions: { } }) // State // Mutation // Action
17. Vuex ࢖͍ํ State State VuexͷجຊͰ͋Γ࠷΋େ੾ͳཁૉ = ঢ়ଶ
18. state: { form: { article: { title: '', ogp_title: '', description: '', keywords: '', main_image: '', }, writers: [], blocks: [], status: Number, should_update: Boolean }, role: String, errors: [], }, Vuex ࢖͍ํ State
19. Vuex ࢖༻ྫ Mutation Mutation StateΛมߋ͢Δ = ঢ়ଶΛมԽͤ͞Δ MutationҎ֎͕ StateΛมߋ͢Δ͜ͱ͸Ͱ͖ͳ͍
20. mutations: { readRole (state, role) { state.role = role }, }, this.$store.commit(‘readRole', ‘staff’) Vuex ࢖༻ྫ Mutation Mutarionͷએݴ ίϯϙʔωϯτͰMutationΛ࢖͏
21. Vuex ࢖༻ྫ Action Action ඇಉظॲཧΛߦ͏ MutationΛݺͿ StateΛมߋ͢Δ͜ͱ͸Ͱ͖ͳ͍
22. Vuex ࢖༻ྫ Action Action MutationͰ͸ඇಉظॲཧΛߦΘͳ͍ ඇಉظॲཧ͕ແ͍৔߹͸ActionΛ հ͞ͳͯ͘΋ྑ͍
23. actions: { saveRole: function(context) { axios.post().then( context.commit(‘saveRole’)) } } methods: { saveRole() { this.$store.dispatch('saveRole') } } Vuex ࢖༻ྫ Action Actionͷએݴ ίϯϙʔωϯτ͔ΒActionͷ࣮ߦ
24. ·ͱΊ w7VFYͱ͸
    wෳ਺ίϯϙʔωϯτͰঢ়ଶͷڞ༗Λศརʹ͢Δ΋ͷ
    wجຊతͳ࢖͍ํ
    w4UBUF
    wঢ়ଶΛอ࣋
    w.VUBUJPO
    wঢ়ଶΛมߋ͢Δ
    w"DUJPO
    wඇಉظॲཧΛߦ͏
25. ࢀߟ wެࣜυΩϡϝϯτ
    IUUQTWVFYWVFKTPSHKB
    w7VFKT
    ͷίϯϙʔωϯτͱ਌ࢠؒσʔλͷૹड৴
    ɹ IUUQDIJCJOPXBOFUOPUFWVFKTWVFIUNM