begin developing more Vuex store mutations, actions and getters (fetch episode data)

This commit is contained in:
Xevion
2020-09-12 10:37:11 -05:00
parent 19db8e9e1b
commit a1a3459ff1
2 changed files with 56 additions and 3 deletions

View File

@@ -0,0 +1,4 @@
export const types = {
FETCH_EPISODE: 'FETCH_EPISODE',
SET_EPISODE: 'SET_EPISODE'
}

View File

@@ -1,12 +1,61 @@
import Vue from "vue"; import Vue from "vue";
import Vuex from "vuex"; import Vuex from "vuex";
import axios from "axios";
import {types} from "@/mutation_types";
Vue.use(Vuex); Vue.use(Vuex);
// Generate 'base' representing episode data
const episodeCount = [6, 22, 23, 14, 26, 24, 24, 24, 23];
const baseData = Array.from({length: 9}, (x, season) => {
// Array of null values representing each episode
let episodeData = Array.from({length: episodeCount[season]}, () => null)
return {season_id: season + 1, episodes: episodeData};
})
console.log(baseData)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
episodeCount: [6, 22, 23, 14, 26, 24, 24, 24, 23] seasonCount: 9,
episodeCount: episodeCount,
quoteData: baseData
}, },
mutations: {}, mutations: {
actions: {}, [types.SET_EPISODE](state, payload) {
state.quoteData[payload.season - 1].episodes[payload.episode - 1] = payload.data
}
},
actions: {
// Perform async API call to fetch specific Episode data
[types.FETCH_EPISODE]({commit}, season, episode) {
const path = `${process.env.VUE_APP_API_URL}/api/episode/${season}/${episode}/`;
axios.get(path)
.then((res) => {
// Push episode data
commit(types.SET_EPISODE, { season: season, episode: episode, data: res.data})
})
.catch((error) => {
// eslint-disable-next-line no-console
console.error(error);
});
}
},
getters: {
// Check whether a episode has been fetched yet
isFetched(season, episode) {
return this.state.quoteData[season - 1].episodes[episode] !== null;
},
// Get the number of episodes present for a given season
getEpisodeCount(season) {
return this.state.episodeCount[season - 1];
},
// return Episode data if present
getEpisode(season, episode) {
if (this.getters.isFetched(season, episode))
return this.state.quoteData[season]
else
return null
}
}
}); });