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

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. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ