Vuexについて

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