Skip to content
Permalink
Browse files

use vuex

  • Loading branch information...
jeffreybiles committed Oct 14, 2019
1 parent 928494c commit 48d52ce5b69af13ad077f73a7efaa54a39b5f7c2
Showing with 25 additions and 9 deletions.
  1. +9 −4 pages/videos/_id.vue
  2. +3 −5 pages/videos/index.vue
  3. +13 −0 store/index.js
@@ -5,19 +5,24 @@
</template>

<script>
import { mapState } from 'vuex';
export default {
head() {
return {
title: '',
titleTemplate: `%s ${this.video.name} - Vue Screencasts`
}
},
async asyncData({$axios, params}) {
async fetch({$axios, params, store}) {
let response = await $axios.get(`/videos/${params.id}`)
let video = response.data.data.attributes;
return {
video
}
store.commit('SET_CURRENT_VIDEO', video);
},
computed: {
...mapState({
video: 'currentVideo'
})
}
}
</script>
@@ -2,7 +2,7 @@
<div>
<nuxt-child />
<h1>Videos</h1>
<div v-for="video in videos" :key="video.id">
<div v-for="video in $store.state.videos" :key="video.id">
<nuxt-link :to="`/videos/${video.id}`">{{ video.name }}</nuxt-link>
</div>
</div>
@@ -13,13 +13,11 @@
head: {
title: 'Vue Screencasts - Video List'
},
async asyncData({$axios}) {
async fetch({$axios, store}) {
let response = await $axios.get('/videos')
let videos = response.data.data.map(v => v.attributes);
return {
videos
}
store.commit('SET_VIDEOS', videos);
},
}
</script>
@@ -0,0 +1,13 @@
export const state = () => ({
videos: [],
currentVideo: {}
})

export const mutations = {
SET_VIDEOS (state, videos) {
state.videos = videos
},
SET_CURRENT_VIDEO (state, video) {
state.currentVideo = video
}
}

0 comments on commit 48d52ce

Please sign in to comment.
You can’t perform that action at this time.