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