Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue___Vuex_のアーキテクチャ完全に理解した.pdf

4bd69b0ec8e5731a5332ee100ad8fb6d?s=47 entaku
October 30, 2019

 Vue___Vuex_のアーキテクチャ完全に理解した.pdf

4bd69b0ec8e5731a5332ee100ad8fb6d?s=128

entaku

October 30, 2019
Tweet

Transcript

  1. Vue × Vuex ͷΞʔΩς Ϋνϟ׬શʹཧղͨ͠

  2. ࣗݾ঺հ • ԕ౻୓໻ (entaku) • Twitter: @entaku19890818 • iOS/Android/Vue ΤϯδχΞ

    • ܦྺ: ͳΜͪΌͬͯSE
 ->NWΤϯδχΞ[SIer]
 ->αʔόʔαΠυΤϯδχΞ[SIer](java/PHP..etc)
 ->iOS/Android ΞϓϦ։ൃ[ελʔτΞοϓ]
 Vue/Android…etc@CBCloudʹͳΓ·͢ <- NEW
  3. ʢࢀরɿhttps://cb-cloud.com/ ʣ

  4. ΞδΣϯμ • 0. ར༻ٕज़ • 1. Vue / Vuex ΞʔΩςΫνϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ

    • 2. σβΠϯ ʙσβΠφʔͱͷίϛϡχέʔγϣϯͱίϯϙʔ ωϯτͷ෼͚ํʁʙ • 3. ։ൃݴޠ ʙTypeScriptΛ࢖͍͍ͨʙ
  5. 0.ར༻ٕज़

  6. 0.ར༻ٕज़

  7. 0.ར༻ٕज़ • Vue (ൃԻ͸ / v j u ː /

    ɺ view ͱಉ༷ʣ͸ϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷϓϩ άϨογϒϑϨʔϜϫʔΫͰ͢ɻଞͷҰຕ൘(ϞϊϦγοΫ: monolithic)ͳϑϨʔϜϫʔΫ ͱ͸ҟͳΓɺVue ͸গͣͭ͠ద༻͍͚ͯ͠ΔΑ͏ʹઃܭ͞Ε͍ͯ·͢ɻத֩ͱͳΔϥΠϒϥ Ϧ͸ view ૚͚ͩʹয఺Λ౰͍ͯͯ·͢ɻͦͷͨΊɺ࢖͍࢝ΊΔͷ΋ɺଞͷϥΠϒϥϦ΍ط ଘͷϓϩδΣΫτʹ౷߹͢Δͷ΋ɺͱͯ΋؆୯Ͱ͢ɻ·ͨɺϞμϯͳπʔϧ΍αϙʔτϥΠ ϒϥϦͱซ༻͢Δ͜ͱͰɺચ࿅͞ΕͨγϯάϧϖʔδΞϓϦέʔγϣϯͷ։ൃ΋ՄೳͰ͢ɻ ʢࢀরɿhttps://jp.vuejs.org/ ʣ
  8. 0.ར༻ٕज़ • Nuxt͸ɺϞμϯͳ web ΞϓϦέʔγϣϯΛ࡞੒͢Δ Vue.js ʹج͍ͮͨϓϩά ϨογϒϑϨʔϜϫʔΫͰ͢ɻVue.js ެࣜϥΠϒϥϦʢvueɺvue-router ΍

    vuexʣ͓Αͼڧྗͳ։ൃπʔϧʢwebpackɺBabel ΍ PostCSSʣʹج͍ͮͯ ͍·͢ɻ Nuxt ͷ໨ඪ͸ɺ༏Εͨ։ൃऀΤΫεϖϦΤϯεΛ೦಄ʹஔ͖ɺWeb ։ൃΛڧྗ͔ͭߴੑೳʹ͢Δ͜ͱͰ͢ɻ ʢࢀরɿhttps://ja.nuxtjs.org/ ʣ
  9. 0.ར༻ٕज़ • ElementUI͸ɺVue 2.0ϕʔεͷUIίϯϙʔωϯτϥΠϒϥϦɻ • ͋Β͔͡ΊElementUIͰ༻ҙ͞ΕͨίϯϙʔωϯτΛ༨෼ʹ HTML/CSS/JSΛΧελϜ͢Δඞཁ͕ͳ͘ͳΔ ʢࢀরɿhttps://element.eleme.io/ ʣ

  10. جຊߏ੒ /utils /store /static /plugins /pages ./package.json ./nuxt.config.js /middleware /lib_sources

    /layouts /components /organisms /molecules /atomsɹ /assets /api
  11. Nuxt ॳظߏ੒ BTTFUTσΟϨΫτϦʹ͸4UZMVT΍4"44ɺ*NBHFɺ'POUͷΑ͏ͳί ϯύΠϧ͞Ε͍ͯͳ͍ϑΝΠϧΛೖΕ·͢ɻ DPNQPOFOUTσΟϨΫτϦʹ͸7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰ͸BTZOD%BUB΍GFUDIΛ࢖͏͜ͱ ͸Ͱ͖·ͤΜɻ MBZPVUTσΟϨΫτϦ͸ΞϓϦέʔγϣϯͷϨΠΞ΢τΛؚΈ·͢ɻϨ ΠΞ΢τ͸ϖʔδͷ֎؍Λมߋ͢ΔͨΊʹ࢖༻͞Ε·͢ʢྫ͑͹αΠυ όʔͳͲʣɻ

    NJEEMFXBSFσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϛυϧ΢ΣΞΛೖΕ ·͢ɻϛυϧ΢ΣΞΛ࢖ͬͯɺϖʔδ΍ϖʔδάϧʔϓʢϨΠΞ΢τʣΛ ϨϯμϦϯά͢ΔΑΓ΋લʹ࣮ߦ͞ΕΔΧελϜؔ਺ΛఆٛͰ͖·͢ɻ QBHFTσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͸͜ͷσΟϨΫτϦ಺ͷ͢΂ͯ ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞੒͠· TUBUJDσΟϨΫτϦ͸௚઀αʔόͷϧʔτʹ഑ஔ͞ΕʢTUBUJD SPCPUTUYU͸IUUQMPDBMIPTUSPCPUTUYUͰΞΫηεՄೳͰ ͢ʣɺมߋ͞Εͳ͍Մೳੑͷߴ͍ϑΝΠϧؚ͕·Ε͍ͯ·͢ʢྫ͑͹ɺ TUPSFσΟϨΫτϦʹ͸7VFYετΞͷϑΝΠϧΛೖΕ·͢ɻ7VFYε τΞ͸/VYUKTʹ෇ଐ͍ͯ͠·͕͢ɺσϑΥϧτͰ͸ແޮʹͳ͍ͬͯ· ͢ɻ͜ͷσΟϨΫτϦʹJOEFYKTɹϑΝΠϧΛ࡞੒͢ΔͱετΞ͕༗ޮ /utils /store /static /plugins /pages ./package.json ./nuxt.config.js /middleware /lib_sources /layouts /components /organisms /molecules /atomsɹ /assets /api ʢࢀরɿhttps://ja.nuxtjs.org/guide/directory-structure ʣ
  12. Nuxt ॳظߏ੒ BTTFUTσΟϨΫτϦʹ͸4UZMVT΍4"44ɺ*NBHFɺ'POUͷΑ͏ͳί ϯύΠϧ͞Ε͍ͯͳ͍ϑΝΠϧΛೖΕ·͢ɻ DPNQPOFOUTσΟϨΫτϦʹ͸7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰ͸BTZOD%BUB΍GFUDIΛ࢖͏͜ͱ ͸Ͱ͖·ͤΜɻ MBZPVUTσΟϨΫτϦ͸ΞϓϦέʔγϣϯͷϨΠΞ΢τΛؚΈ·͢ɻϨ ΠΞ΢τ͸ϖʔδͷ֎؍Λมߋ͢ΔͨΊʹ࢖༻͞Ε·͢ʢྫ͑͹αΠυ όʔͳͲʣɻ

    NJEEMFXBSFσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϛυϧ΢ΣΞΛೖΕ ·͢ɻϛυϧ΢ΣΞΛ࢖ͬͯɺϖʔδ΍ϖʔδάϧʔϓʢϨΠΞ΢τʣΛ ϨϯμϦϯά͢ΔΑΓ΋લʹ࣮ߦ͞ΕΔΧελϜؔ਺ΛఆٛͰ͖·͢ɻ QBHFTσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͸͜ͷσΟϨΫτϦ಺ͷ͢΂ͯ ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞੒͠· TUBUJDσΟϨΫτϦ͸௚઀αʔόͷϧʔτʹ഑ஔ͞ΕʢTUBUJD SPCPUTUYU͸IUUQMPDBMIPTUSPCPUTUYUͰΞΫηεՄೳͰ ͢ʣɺมߋ͞Εͳ͍Մೳੑͷߴ͍ϑΝΠϧؚ͕·Ε͍ͯ·͢ʢྫ͑͹ɺ TUPSFσΟϨΫτϦʹ͸7VFYετΞͷϑΝΠϧΛೖΕ·͢ɻ7VFYε τΞ͸/VYUKTʹ෇ଐ͍ͯ͠·͕͢ɺσϑΥϧτͰ͸ແޮʹͳ͍ͬͯ· ͢ɻ͜ͷσΟϨΫτϦʹJOEFYKTɹϑΝΠϧΛ࡞੒͢ΔͱετΞ͕༗ޮ /utils /store /static /plugins /pages ./package.json ./nuxt.config.js /middleware /lib_sources /layouts /components /organisms /molecules /atomsɹ /assets /api /VYUͰ͍͍ͩͨἧ͏ʂʂ
  13. ࠓճ଍ͨ͠΋ͷ BYJPTΛར༻ͨ͠"1*ͷॲཧ "UPNJD%FTJHOΛجʹͨ͠ίϯϙʔωϯτߏ੒ɻ 1BHFT͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠ ֎෦ϥΠϒϥϦͷಋೖʹ࢖༻ͨ͠ ڞ௨Ͱར༻͢Δؔ਺ͷอ؅ઌ /utils /store /static /plugins

    /pages ./package.json ./nuxt.config.js /middleware /lib_sources /layouts /components /organisms /molecules /atomsɹ /assets /api
  14. ࠓճओʹ࿩͢ൣғ QBHFTσΟϨΫτϦʹ͸ΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͸͜ͷσΟϨΫτϦ಺ͷ͢΂ͯ ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞੒͠· TUPSFσΟϨΫτϦʹ͸7VFYετΞͷϑΝΠϧΛೖΕ·͢ɻ7VFYε τΞ͸/VYUKTʹ෇ଐ͍ͯ͠·͕͢ɺσϑΥϧτͰ͸ແޮʹͳ͍ͬͯ· ͢ɻ͜ͷσΟϨΫτϦʹJOEFYKTɹϑΝΠϧΛ࡞੒͢ΔͱετΞ͕༗ޮ /utils /store /static

    /plugins /pages ./package.json ./nuxt.config.js /middleware /lib_sources /layouts /components /organisms /molecules /atomsɹ /assets /api DPNQPOFOUTσΟϨΫτϦʹ͸7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰ͸BTZOD%BUB΍GFUDIΛ࢖͏͜ͱ ͸Ͱ͖·ͤΜɻ "UPNJD%FTJHOΛجʹͨ͠ίϯϙʔωϯτߏ੒ɻ 1BHFT͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠
  15. 1.Vue / Vuex ΞʔΩςΫ νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ

  16. ࠓճओʹ࿩͢ൣғΠϝʔδ ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

  17. Πϝʔδ͕ ׬શ͡Όͳ͍ؾ͕͢Δ ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

  18. (FUUFS 1BHFT $POQP SOFOU ࠓճओʹ࿩͢ൣғͷΠϝʔδ(վม) ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

  19. (FUUFS 1BHFT $POQP SOFOU Pages ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

  20. Pages <template> // HTMLΛॻ͘৔ॴ </template> <script> // JSΛॻ͘৔ॴ </script> <style

    scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style>
  21. <template> <components></components > </template> <script> import Components from ‘@/components/organisms/Components' components:

    { Components } </script> Pages - ίϯϙʔωϯτͷݺͼग़͠-
  22. Pages - ίϯϙʔωϯτͷݺͼग़͠- <template> <components></components > </template> <script> import Components

    from `@/components/organisms/Components` components: { Components } </script> ݺͼग़͠ 7JFX΁ͷඳը
  23. Pages - vuexͷݺͼग़͠- <template> <components :data=”data” ></components > </template> <script>

    import { mapGetters, mapActions} from 'vuex' computed: { ...mapGetters(`Store`, [‘data’]) }, async fetch({ store, params }) { store.dispatch(‘Store/getFirstData') }, methods: { ...mapActions(`Store`, [‘update’]), async getDriverOnMap() { await this.update() } } </script>
  24. Pages - vuexͷݺͼग़͠- <template> <components :data=”data” ></components > </template> <script>

    import { mapGetters, mapActions} from 'vuex' computed: { ...mapGetters(`Store`, [‘data’]) }, async fetch({ store, params }) { store.dispatch(‘Store/getFirstData') }, methods: { ...mapActions(`Store`, [‘update’]), async getDriverOnMap() { await this.update() } } </script> (FUUFSͰݺͼग़͠ ͨ಺༰ͷදࣔ (FUUFSͷݺͼग़͠ "DUJPOͷݺͼग़͠ "DUJPOͷ࣮ߦ ॳظදࣔͳͲ ͷݺͼग़͠
  25. (FUUFS 1BHFT $POQP SOFOU Vuex ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ

  26. Vuex - state- export const state = () => ({

    array: [], firstName: ``, lastName: ``, }) • σʔλͷอ؅ઌ
  27. Vuex - mutations - export const mutations = { [types.SET_ARRAY](state,

    array) { state.array = array }, [types.SET_FIRST_NAME](state, firstName) { state.firstName = firstName }, [types.SET_LAST_NAME](state, lastName) { state.lastName = lastName } } • σʔλͷมߋ
  28. export const getters = { fullName: state => { return

    state.firstName + state.lastName }, array: state => { return state.array } } Vuex - getters - • σʔλͷऔಘ
  29. export const actions = { async fetchUser({ commit }) {

    const user = await fetchUser() commit(types.SET_FIRST_NAME, user.firstName) commit(types.SET_LAST_NAME, user.lastName) } } Vuex - actions - • σʔλͷߋ৽ॲཧ
  30. ࣦഊͨ͜͠ͱ

  31. ࣦഊͨ͜͠ͱ • StateΛ௚઀ࢀর͍ͯ͠Δ.. • ActionΛ௨͞ͳ͍MutationͷॲཧΛ͔͍ͯ͠·ͬͨ..

  32. <template> <div> {{firstName}} </div> </template> <script> export default { computed:

    { ...mapState(`store`, ['firstName']) }, methods: { update() { this.$store.commit(‘store/' + types.SET_FIRST_NAME) } } } </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style> ࣦഊͨ͜͠ͱ • StateΛ௚઀ࢀর͍ͯ͠Δ.. • ActionΛ௨͞ͳ͍MutationͷॲཧΛ͔͍ͯ͠·ͬͨ..
  33. ͳͥState/MutationΛ௚઀ΑͿ ͷ͕·͍ͣͷ͔ʁ

  34. ͳͥState/MutationΛ௚઀ΑͿ ͷ͕·͍ͣͷ͔ʁ • StateΛ௚઀ࢀর͢ΔͱɺVuexʹอଘ͞Ε͍ͯΔσʔλΛԿ΋հ ͣ͞ʹݟΔ͜ͱʹͳΔɻGetterͳͲͰදࣔ಺༰Λมߋͯ͠ࢀর ͍ͯ͠Δ৔߹͕͋ΔͨΊɺ৘ใͷҰҙੑ͕อͯͳ͘ͳΔ͔Β • MutationΛݺͿ͜ͱͰvueϑΝΠϧ͔ΒɺStateͷ಺༰Λ௚઀ॻ ͖׵͑Δ͜ͱ͕Ͱ͖Δɻ͜Ε͸ϩδοΫΛvueϑΝΠϧʹ಺ࡏ͠ ͯ͠·͏ͷͰɺߋ৽ॲཧ͸ActionsʹدͤΔɻ

  35. (FUUFS 1BHFT $POQP SOFOU "

  36. 1.Vue / Vuex ΞʔΩςΫ νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ • ࢀরॲཧ͸gettersʹΑͤΔ • ߋ৽ॲཧ͸ActionsʹدͤΔ •

    vue͔Β͸gettersͱActionsͷΈΛࢀর͢Δ • state͸getters͔Βࢀর͢Δ • Mutation͸Actions͔Βߋ৽͢Δ
  37. 2.σβΠϯ ʙσβΠφʔͱͷίϛϡχ έʔγϣϯͱίϯϙʔωϯτͷ෼͚ํʁʙ

  38. Atomic DesignΛ࠾༻ʂ

  39. Atomic Designͱ͸ʁ • Atomic Design ͱ͸ ɺBrad Frostࢯ͕ఏএͨ͠UIઃܭʹ͓͍ͯ ίϯϙʔωϯτΛํ๏/ࢥ૝Ͱ͢ɻ •

    ϑϩϯτΤϯυͷઃܭࢥ૝ͷΑ͏ʹޠΒΕ͍ͯΔࣄ΋͋Γ·͢ ͕ɺ͋͘·ͰσβΠϯͷઃܭʹ͍ͭͯͷ΋ͷͰ͢ɻ ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ
  40. Atomic Designͱ͸ʁ ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ

  41. None
  42. Atoms <template> <el-input class="Input" v-model="value" :type="inputType" :placeholder="placeholder" :disabled="isDisabled" @blur="$emit('blur')" />

    </template> <script> props: { value: { type: String, default: '' } } </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style> • element-uiίϯϙʔωϯτͷϥο ύʔ͔ͦͷ΋ͷΛ͍ΕΔ
  43. Molecules <template> <div class=”Form”> <Label /> <Input /> </div> </template>

    <script> import Input from ‘@/components/atoms/Input’ import Label from ‘@/components/atoms/Label’ </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style> • 1ͭҎ্ͷAtoms͕ར༻͞Ε͍ͯΔ
  44. Organisms <template> <div class=”Basic”> <Form /> <Form /> <Button />

    </div> </template> <script> import Form from ‘@/components/molecules/Form’ import Button from ‘@/components/molecules/Button’ export default { } </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style>
  45. Templates <template> <div class=”InputPage”> <Basic /> <Custom /> </div> </template>

    <script> import Basic from ‘@/components/organisms/Basic’ import Custom from ‘@/components/organisms/Custom’ </script> <style scoped lang=“scss"> // CSSΛॻ͘৔ॴ </style>
  46. Pages <template> <div class=”InputPage”> <InputPage /> </div> </template> <script> import

    InputPage from ‘@/components/templates/InputPage’ // Store΁ͷΞΫηεॲཧ͸Pages͚ͩ…! </script> <style scoped lang=“scss”></style>
  47. Atomic DesignͰࣦഊͨ͜͠ͱ

  48. Atomic DesignͰࣦഊͨ͜͠ͱ • elementUI४ڌʹܾΊͨͷʹ͔ͳΓΧελϜͰ࡞ͬͯ͠·ͬͨ UIɻ • TemplatesΛೖΕͣʹ։ൃ͍ͯͨ͠… • ֊૚͕ਂ͘ͳΓແݶemit஍ࠈ..

  49. ΧελϜͰ࡞ͬͯ͠·ͬͨUIɻ • ཁ݅ΛܾΊΔࡍʹσβΠϯ͕มΘͬͯ͠·͏ • σβΠϯγεςϜ͕ߏஙͰ͖͍ͯͳ͔ͬͨ

  50. ʢࢀরɿhttps://note.mu/smartcamp_design/n/n4e4717e9d8d0 ʣ Atomic Design ͱ Figma ͷ૊Έ߹ΘͤͰσβΠϯ͕ศརʹͳΔʛσβΠϯγεςϜͷ࡞Γํ ΧελϜͰ࡞ͬͯ͠·ͬͨUIɻ

  51. TemplatesΛೖΕͣʹ։ൃ͍ͯ͠ ͨ… ❌ ංେԽɹ

  52. TemplatesΛೖΕͣʹ։ൃ͍ͯ͠ ͨ… ❌

  53. ແݶemit஍ࠈ.. DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU emit emit emit emit

  54. 3. ։ൃݴޠ ʙTypeScriptΛ࢖͍ͨ ͍ʙ (్த)

  55. ੩తܕ෇͚Ͱ։ൃ͍ͨ͠ʂʂʂʂ

  56. ͦ͏SwiftͷΑ͏ʹ..

  57. Swiftͷߏ଄ମͷѻ͍ struct Team: Decodable { let id:Int let name:String let

    shortName:String let crestUrl:URL let website:URL let venue:String } —— let team:Team = Team()
  58. ͦ͜ͰTypeScriptͰ͢Α

  59. Vuex - types - export interface RootState { version: string;

    } export interface TeamsState { teams: Team[] } export interface Team { ɹ id: number; name:string; area: Area; crestUrl: string; } export interface Area { id: string; name: string; } • σʔλͷఆٛ
  60. Vuex - index/state- const state: TeamsState = { teams: [],

    }; export const todos: Module<TeamsState, RootState> = { namespaced: true, state, getters, actions, mutations }; • σʔλͷอ؅ઌ
  61. Vuex - mutations - export const mutations: MutationTree<TeamsState> = {

    teamsLoaded(state, teams: Team[]) { state.teams = teams }, teamsError(state) { state.teams = [] } } • σʔλͷมߋ
  62. const getters: GetterTree<TeamsState, RootState> = { teams: (state: TeamsState) =>

    { return state }, } Vuex - getters - • σʔλͷऔಘ
  63. const actions: ActionTree<TeamsState, RootState>= { fetch: async ({ commit })

    => { try { const res = await axios.get('https://api.football-data.org/v2/competitions/PL/teams/', { headers: { 'X-Auth-Token': ‘XXXX' } }) const teams: Team[] = res.data.teams commit('teamsLoaded', teams) } catch (error) { // commit('teamsError') } }, }; Vuex - actions - • σʔλͷߋ৽ॲཧ
  64. Pages - vuexͷݺͼग़͠- <template> <div> {{ message }} <div v-for="team

    in teams.teams" :key='team.id'> {{team.name}} </div> </div> </template> <script lang="ts"> import { Vue } from 'vue-property-decorator'; import { mapGetters, mapActions, mapState, mapMutations } from 'vuex' export default Vue.extend({ data () { const message: string = 'This is a message' return { message } }, computed: { ...mapGetters(`Team`, ['teams']) }, async fetch ({ store, params }) { await store.dispatch('Team/fetch') } }) ·ͩͰ͖ͯͳ͍Α
  65. GitHub https://github.com/entaku19890818/football-nuxt

  66. ·ͱΊ • ར༻ٕज़ • Nuxtʹ΄΅͢΂͕ͯ͋Δ • Vue / Vuex ΞʔΩςΫνϟ

    • ࢀরॲཧ͸gettersʹΑͤΔ • ߋ৽ॲཧ͸ActionsʹدͤΔ • σβΠϯ • UIϑϨʔϜϫʔΫΛҙࣝͨ͠σβΠφʔͱͷίϛϡχέʔγϣϯ • σβΠϯγεςϜͭ͘Δ • ։ൃݴޠ • TypeScriptͰ৺ཧత҆શੑͷߴ͍։ൃΛ…
  67. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ