Home

Hello, I’m running into an issue where when I initially load the page, my data isn’t being loaded, however if I navigate to another page, and then click back to the home page, the data is loaded into the component. I’m not sure what I’m doing wrong either in my component or store, any tips appreciated. Relevant files below…

// store/index.js

const createStore = () => {
    return new Vuex.Store({
        state: {
            repos: []
        },
        actions: {
            LOAD_REPOS: function({ commit }) {
                axios.get('repourl').then((res) => {
                    commit('SET_REPOS', res.data)
                })
            }
        },
        mutations: {
            SET_REPOS: (state, repos) => {
                state.repos = repos
            }
        }
    })
}

export default createStore

// pages/index.vue

<template>
    <div class="page-content">
        <p v-for="repo in repos">{{ repo.name }}</p>
    </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
    fetch ({ store }) {
        store.dispatch('LOAD_REPOS')
    },
    computed: mapState([
        'repos'
    ])
}
</script>