I successfully obtained and displayed data using Nuxt's Fetch API, but now I'm looking to transition to using Vuex instead.
store/index.js:
import Axios from 'axios'
export const getters = {
isAuthenticated: (state) => {
return state.auth.loggedIn
},
loggedInUser: (state) => {
return state.auth.user
}
}
export const state = () => ({
videos: []
})
export const mutations = {
storeVideos: (state, videos) => {
state.videos = videos
}
}
export const actions = {
async getVideos ({ commit }) {
const res = await Axios.get(`https://api.themoviedb.org/3/movie/popular?api_key=${process.env.API_SECRET}&page=${this.currentPage}`)
commit('storeVideos', res.data)
}
}
pages/test.vue:
<template>
<Moviecards
v-for="(movie, index) in $store.state.videos"
:key="index"
:movie="movie"
:data-index="index"
/>
</template>
<script>
...
fetch ({ store }) {
store.commit('storeVideos')
},
data () {
return {
prevpage: null,
nextpage: null,
currentPage: 1,
pageNumbers: [],
totalPages: 0,
popularmovies: []
}
},
watch: {
},
methods: {
next () {
this.currentPage += 1
}
}
}
...
Upon inspection using Vue Dev Tools, the array is showing empty.