Vuexについて

1f283a27a4bfce44adc2166866c64b9d?s=47 sinpey_g2
October 19, 2017

 Vuexについて

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

1f283a27a4bfce44adc2166866c64b9d?s=128

sinpey_g2

October 19, 2017
Tweet

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