Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
entaku
October 30, 2019
Programming
8
7.8k
Vue___Vuex_のアーキテクチャ完全に理解した.pdf
entaku
October 30, 2019
Tweet
Share
More Decks by entaku
See All by entaku
スクラムマスターの私が最もissueを解決できるところに連れて行こう.pdf
entaku
0
140
Voicyに入って3ヶ月が経ちました.pdf
entaku
0
7
音声アプリにおけるバックグラウンド再生Tips.pdf
entaku
1
730
実例と歴史から学ぶ_Flutterの状態管理方法の選定_.pdf
entaku
1
1.5k
PickGo_for_Partnerの移行方法から学ぶ_既存のネイティブアプリをFlutterへリプレイスする方法_.pdf
entaku
2
3.3k
DroidKaigiの公式アプリで始める_iOSアプリOSSコミッターへの道
entaku
2
350
一人iOSエンジニアでも気持ちよく開発できるiOSアプリ開発者になる!
entaku
2
420
イケてるAndroid開発を完全に理解した__.pdf
entaku
0
330
Other Decks in Programming
See All in Programming
Branching out to Jetpack Compose
chrisbanes
4
1.1k
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.7k
Terraform Plan/Apply結果の自動通知
ymmy02
0
280
GDG Seoul IO Extended 2022 - Android Compose
taehwandev
0
290
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
4
240
ISUCON12 事前講習
rosylilly
3
4.1k
実践エクストリームプログラミング / Extreme Programming in Practice
enk
1
410
Android Tools & Performance
takahirom
1
430
Why Airflow? & What's new in Airflow 2.3?
kaxil
0
110
trocco® の品質を守る、とても普通な取り組み
kekekenta
0
350
GitHub Actions を導入した経緯
tamago3keran
1
430
Baseline Profilesでアプリのパフォーマンスを向上させる / Improve app performance with Baseline Profiles
numeroanddev
0
230
Featured
See All Featured
Building Adaptive Systems
keathley
25
1.1k
Ruby is Unlike a Banana
tanoku
91
9.2k
Optimizing for Happiness
mojombo
365
63k
Git: the NoSQL Database
bkeepers
PRO
415
59k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.2k
Practical Orchestrator
shlominoach
178
8.6k
Automating Front-end Workflow
addyosmani
1351
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
YesSQL, Process and Tooling at Scale
rocio
157
12k
Raft: Consensus for Rubyists
vanstee
126
5.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
Transcript
Vue × Vuex ͷΞʔΩς Ϋνϟશʹཧղͨ͠
ࣗݾհ • ԕ౻ (entaku) • Twitter: @entaku19890818 • iOS/Android/Vue ΤϯδχΞ
• ܦྺ: ͳΜͪΌͬͯSE ->NWΤϯδχΞ[SIer] ->αʔόʔαΠυΤϯδχΞ[SIer](java/PHP..etc) ->iOS/Android ΞϓϦ։ൃ[ελʔτΞοϓ] Vue/Android…etc@CBCloudʹͳΓ·͢ <- NEW
ʢࢀরɿhttps://cb-cloud.com/ ʣ
ΞδΣϯμ • 0. ར༻ٕज़ • 1. Vue / Vuex ΞʔΩςΫνϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ
• 2. σβΠϯ ʙσβΠφʔͱͷίϛϡχέʔγϣϯͱίϯϙʔ ωϯτͷ͚ํʁʙ • 3. ։ൃݴޠ ʙTypeScriptΛ͍͍ͨʙ
0.ར༻ٕज़
0.ར༻ٕज़
0.ར༻ٕज़ • Vue (ൃԻ / v j u ː /
ɺ view ͱಉ༷ʣϢʔβʔΠϯλʔϑΣΠεΛߏங͢ΔͨΊͷϓϩ άϨογϒϑϨʔϜϫʔΫͰ͢ɻଞͷҰຕ൘(ϞϊϦγοΫ: monolithic)ͳϑϨʔϜϫʔΫ ͱҟͳΓɺVue গͣͭ͠ద༻͍͚ͯ͠ΔΑ͏ʹઃܭ͞Ε͍ͯ·͢ɻத֩ͱͳΔϥΠϒϥ Ϧ view ͚ͩʹযΛ͍ͯͯ·͢ɻͦͷͨΊɺ͍࢝ΊΔͷɺଞͷϥΠϒϥϦط ଘͷϓϩδΣΫτʹ౷߹͢Δͷɺͱͯ؆୯Ͱ͢ɻ·ͨɺϞμϯͳπʔϧαϙʔτϥΠ ϒϥϦͱซ༻͢Δ͜ͱͰɺચ࿅͞ΕͨγϯάϧϖʔδΞϓϦέʔγϣϯͷ։ൃՄೳͰ͢ɻ ʢࢀরɿhttps://jp.vuejs.org/ ʣ
0.ར༻ٕज़ • NuxtɺϞμϯͳ web ΞϓϦέʔγϣϯΛ࡞͢Δ Vue.js ʹج͍ͮͨϓϩά ϨογϒϑϨʔϜϫʔΫͰ͢ɻVue.js ެࣜϥΠϒϥϦʢvueɺvue-router
vuexʣ͓Αͼڧྗͳ։ൃπʔϧʢwebpackɺBabel PostCSSʣʹج͍ͮͯ ͍·͢ɻ Nuxt ͷඪɺ༏Εͨ։ൃऀΤΫεϖϦΤϯεΛ೦಄ʹஔ͖ɺWeb ։ൃΛڧྗ͔ͭߴੑೳʹ͢Δ͜ͱͰ͢ɻ ʢࢀরɿhttps://ja.nuxtjs.org/ ʣ
0.ར༻ٕज़ • ElementUIɺVue 2.0ϕʔεͷUIίϯϙʔωϯτϥΠϒϥϦɻ • ͋Β͔͡ΊElementUIͰ༻ҙ͞ΕͨίϯϙʔωϯτΛ༨ʹ HTML/CSS/JSΛΧελϜ͢Δඞཁ͕ͳ͘ͳΔ ʢࢀরɿhttps://element.eleme.io/ ʣ
جຊߏ /utils /store /static /plugins /pages ./package.json ./nuxt.config.js /middleware /lib_sources
/layouts /components /organisms /molecules /atomsɹ /assets /api
Nuxt ॳظߏ BTTFUTσΟϨΫτϦʹ4UZMVT4"44ɺ*NBHFɺ'POUͷΑ͏ͳί ϯύΠϧ͞Ε͍ͯͳ͍ϑΝΠϧΛೖΕ·͢ɻ DPNQPOFOUTσΟϨΫτϦʹ7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰBTZOD%BUBGFUDIΛ͏͜ͱ Ͱ͖·ͤΜɻ MBZPVUTσΟϨΫτϦΞϓϦέʔγϣϯͷϨΠΞτΛؚΈ·͢ɻϨ ΠΞτϖʔδͷ֎؍Λมߋ͢ΔͨΊʹ༻͞Ε·͢ʢྫ͑αΠυ όʔͳͲʣɻ
NJEEMFXBSFσΟϨΫτϦʹΞϓϦέʔγϣϯͷϛυϧΣΞΛೖΕ ·͢ɻϛυϧΣΞΛͬͯɺϖʔδϖʔδάϧʔϓʢϨΠΞτʣΛ ϨϯμϦϯά͢ΔΑΓલʹ࣮ߦ͞ΕΔΧελϜؔΛఆٛͰ͖·͢ɻ QBHFTσΟϨΫτϦʹΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͜ͷσΟϨΫτϦͷͯ͢ ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞͠· TUBUJDσΟϨΫτϦαʔόͷϧʔτʹஔ͞ΕʢTUBUJD SPCPUTUYUIUUQMPDBMIPTUSPCPUTUYUͰΞΫηεՄೳͰ ͢ʣɺมߋ͞Εͳ͍Մೳੑͷߴ͍ϑΝΠϧؚ͕·Ε͍ͯ·͢ʢྫ͑ɺ 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 ʣ
Nuxt ॳظߏ BTTFUTσΟϨΫτϦʹ4UZMVT4"44ɺ*NBHFɺ'POUͷΑ͏ͳί ϯύΠϧ͞Ε͍ͯͳ͍ϑΝΠϧΛೖΕ·͢ɻ DPNQPOFOUTσΟϨΫτϦʹ7VFKTͷίϯϙʔωϯτϑΝΠϧΛೖ Ε·͢ɻ͜ΕΒͷίϯϙʔωϯτͰBTZOD%BUBGFUDIΛ͏͜ͱ Ͱ͖·ͤΜɻ MBZPVUTσΟϨΫτϦΞϓϦέʔγϣϯͷϨΠΞτΛؚΈ·͢ɻϨ ΠΞτϖʔδͷ֎؍Λมߋ͢ΔͨΊʹ༻͞Ε·͢ʢྫ͑αΠυ όʔͳͲʣɻ
NJEEMFXBSFσΟϨΫτϦʹΞϓϦέʔγϣϯͷϛυϧΣΞΛೖΕ ·͢ɻϛυϧΣΞΛͬͯɺϖʔδϖʔδάϧʔϓʢϨΠΞτʣΛ ϨϯμϦϯά͢ΔΑΓલʹ࣮ߦ͞ΕΔΧελϜؔΛఆٛͰ͖·͢ɻ QBHFTσΟϨΫτϦʹΞϓϦέʔγϣϯͷϏϡʔٴͼϧʔςΟϯάϑΝ ΠϧΛೖΕ·͢ɻ/VYUKTϑϨʔϜϫʔΫ͜ͷσΟϨΫτϦͷͯ͢ ͷWVFϑΝΠϧΛಡΈࠐΈɺΞϓϦέʔγϣϯͷϧʔλʔΛ࡞͠· TUBUJDσΟϨΫτϦαʔόͷϧʔτʹஔ͞ΕʢTUBUJD SPCPUTUYUIUUQMPDBMIPTUSPCPUTUYUͰΞΫηεՄೳͰ ͢ʣɺมߋ͞Εͳ͍Մೳੑͷߴ͍ϑΝΠϧؚ͕·Ε͍ͯ·͢ʢྫ͑ɺ 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Ͱ͍͍ͩͨἧ͏ʂʂ
ࠓճͨ͠ͷ 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
ࠓճओʹ͢ൣғ 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%BUBGFUDIΛ͏͜ͱ Ͱ͖·ͤΜɻ "UPNJD%FTJHOΛجʹͨ͠ίϯϙʔωϯτߏɻ 1BHFT͔Β͜ΕΒΛݺͼग़͢Α͏ʹͨ͠
1.Vue / Vuex ΞʔΩςΫ νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ
ࠓճओʹ͢ൣғΠϝʔδ ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ
Πϝʔδ͕ શ͡Όͳ͍ؾ͕͢Δ ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ
(FUUFS 1BHFT $POQP SOFOU ࠓճओʹ͢ൣғͷΠϝʔδ(վม) ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ
(FUUFS 1BHFT $POQP SOFOU Pages ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ
Pages <template> // HTMLΛॻ͘ॴ </template> <script> // JSΛॻ͘ॴ </script> <style
scoped lang=“scss"> // CSSΛॻ͘ॴ </style>
<template> <components></components > </template> <script> import Components from ‘@/components/organisms/Components' components:
{ Components } </script> Pages - ίϯϙʔωϯτͷݺͼग़͠-
Pages - ίϯϙʔωϯτͷݺͼग़͠- <template> <components></components > </template> <script> import Components
from `@/components/organisms/Components` components: { Components } </script> ݺͼग़͠ 7JFXͷඳը
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>
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ͷ࣮ߦ ॳظදࣔͳͲ ͷݺͼग़͠
(FUUFS 1BHFT $POQP SOFOU Vuex ʢࢀরɿhttps://vuex.vuejs.org/ja/ ʣ
Vuex - state- export const state = () => ({
array: [], firstName: ``, lastName: ``, }) • σʔλͷอઌ
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 } } • σʔλͷมߋ
export const getters = { fullName: state => { return
state.firstName + state.lastName }, array: state => { return state.array } } Vuex - getters - • σʔλͷऔಘ
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 - • σʔλͷߋ৽ॲཧ
ࣦഊͨ͜͠ͱ
ࣦഊͨ͜͠ͱ • StateΛࢀর͍ͯ͠Δ.. • ActionΛ௨͞ͳ͍MutationͷॲཧΛ͔͍ͯ͠·ͬͨ..
<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ͷॲཧΛ͔͍ͯ͠·ͬͨ..
ͳͥState/MutationΛΑͿ ͷ͕·͍ͣͷ͔ʁ
ͳͥState/MutationΛΑͿ ͷ͕·͍ͣͷ͔ʁ • StateΛࢀর͢ΔͱɺVuexʹอଘ͞Ε͍ͯΔσʔλΛԿհ ͣ͞ʹݟΔ͜ͱʹͳΔɻGetterͳͲͰදࣔ༰Λมߋͯ͠ࢀর ͍ͯ͠Δ߹͕͋ΔͨΊɺใͷҰҙੑ͕อͯͳ͘ͳΔ͔Β • MutationΛݺͿ͜ͱͰvueϑΝΠϧ͔ΒɺStateͷ༰Λॻ ͖͑Δ͜ͱ͕Ͱ͖Δɻ͜ΕϩδοΫΛvueϑΝΠϧʹࡏ͠ ͯ͠·͏ͷͰɺߋ৽ॲཧActionsʹدͤΔɻ
(FUUFS 1BHFT $POQP SOFOU "
1.Vue / Vuex ΞʔΩςΫ νϟɹʙԿΛͲ͜ʹدͤΔ͔ʁʙ • ࢀরॲཧgettersʹΑͤΔ • ߋ৽ॲཧActionsʹدͤΔ •
vue͔ΒgettersͱActionsͷΈΛࢀর͢Δ • stategetters͔Βࢀর͢Δ • MutationActions͔Βߋ৽͢Δ
2.σβΠϯ ʙσβΠφʔͱͷίϛϡχ έʔγϣϯͱίϯϙʔωϯτͷ͚ํʁʙ
Atomic DesignΛ࠾༻ʂ
Atomic Designͱʁ • Atomic Design ͱ ɺBrad Frostࢯ͕ఏএͨ͠UIઃܭʹ͓͍ͯ ίϯϙʔωϯτΛํ๏/ࢥͰ͢ɻ •
ϑϩϯτΤϯυͷઃܭࢥͷΑ͏ʹޠΒΕ͍ͯΔࣄ͋Γ·͢ ͕ɺ͋͘·ͰσβΠϯͷઃܭʹ͍ͭͯͷͷͰ͢ɻ ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ
Atomic Designͱʁ ʢࢀরɿhttp://atomicdesign.bradfrost.com/ ʣ
None
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ίϯϙʔωϯτͷϥο ύʔ͔ͦͷͷΛ͍ΕΔ
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͕ར༻͞Ε͍ͯΔ
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>
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>
Pages <template> <div class=”InputPage”> <InputPage /> </div> </template> <script> import
InputPage from ‘@/components/templates/InputPage’ // StoreͷΞΫηεॲཧPages͚ͩ…! </script> <style scoped lang=“scss”></style>
Atomic DesignͰࣦഊͨ͜͠ͱ
Atomic DesignͰࣦഊͨ͜͠ͱ • elementUI४ڌʹܾΊͨͷʹ͔ͳΓΧελϜͰ࡞ͬͯ͠·ͬͨ UIɻ • TemplatesΛೖΕͣʹ։ൃ͍ͯͨ͠… • ֊͕ਂ͘ͳΓແݶemitࠈ..
ΧελϜͰ࡞ͬͯ͠·ͬͨUIɻ • ཁ݅ΛܾΊΔࡍʹσβΠϯ͕มΘͬͯ͠·͏ • σβΠϯγεςϜ͕ߏஙͰ͖͍ͯͳ͔ͬͨ
ʢࢀরɿhttps://note.mu/smartcamp_design/n/n4e4717e9d8d0 ʣ Atomic Design ͱ Figma ͷΈ߹ΘͤͰσβΠϯ͕ศརʹͳΔʛσβΠϯγεςϜͷ࡞Γํ ΧελϜͰ࡞ͬͯ͠·ͬͨUIɻ
TemplatesΛೖΕͣʹ։ൃ͍ͯ͠ ͨ… ❌ ංେԽɹ
TemplatesΛೖΕͣʹ։ൃ͍ͯ͠ ͨ… ❌
ແݶemitࠈ.. DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU DMJDL&WFOU emit emit emit emit
3. ։ൃݴޠ ʙTypeScriptΛ͍ͨ ͍ʙ (్த)
੩తܕ͚Ͱ։ൃ͍ͨ͠ʂʂʂʂ
ͦ͏SwiftͷΑ͏ʹ..
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()
ͦ͜ͰTypeScriptͰ͢Α
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; } • σʔλͷఆٛ
Vuex - index/state- const state: TeamsState = { teams: [],
}; export const todos: Module<TeamsState, RootState> = { namespaced: true, state, getters, actions, mutations }; • σʔλͷอઌ
Vuex - mutations - export const mutations: MutationTree<TeamsState> = {
teamsLoaded(state, teams: Team[]) { state.teams = teams }, teamsError(state) { state.teams = [] } } • σʔλͷมߋ
const getters: GetterTree<TeamsState, RootState> = { teams: (state: TeamsState) =>
{ return state }, } Vuex - getters - • σʔλͷऔಘ
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 - • σʔλͷߋ৽ॲཧ
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') } }) ·ͩͰ͖ͯͳ͍Α
GitHub https://github.com/entaku19890818/football-nuxt
·ͱΊ • ར༻ٕज़ • Nuxtʹ΄΅͕ͯ͋͢Δ • Vue / Vuex ΞʔΩςΫνϟ
• ࢀরॲཧgettersʹΑͤΔ • ߋ৽ॲཧActionsʹدͤΔ • σβΠϯ • UIϑϨʔϜϫʔΫΛҙࣝͨ͠σβΠφʔͱͷίϛϡχέʔγϣϯ • σβΠϯγεςϜͭ͘Δ • ։ൃݴޠ • TypeScriptͰ৺ཧత҆શੑͷߴ͍։ൃΛ…
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ