Facing issues while committing in Vuex

I am facing this strange issue while committing data to store. Here is my code -

I’ve created a separate module named songs for this.

store/index.js

import Vue from "vue";
import Vuex from "vuex";
import songs from "./modules/songs";

Vue.use(Vuex);

export default new Vuex.Store({
	modules: {
		songs
	}
});

store/modules/songs.js

import axios from 'axios'

const store = {
    songs: []
}

const getters = {
    getSongs: state => state.songs
}

const actions = {
    async fetchSongs({ commit }){
        const response = await axios.get(
            'http://localhost:3000/data/musics.json'
        )
        commit('setSongs', response.data)
    }
}

const mutations = {
    setSongs: (state, songs) => (state.songs = songs)
}

export default {
    store,
    getters,
    actions,
    mutations
}

components/Player.vue

<template>
  <div>
    <h2>placehold</h2>
    <ul v-for="(song, i) in getSongs" :key="i">
        <li>{{ song.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {
  name: "Player",
  computed: {
    ...mapGetters(["getSongs"])
  },
  methods: {
    ...mapActions(["fetchSongs"])
  },
  created() {
    this.fetchSongs();
  },
};
</script>

Technically as soon as Player component is created an API call should be made and immediately after which value should be committed in store with commit('setSongs', response.data).

But for some reason when I load the page loads with no data in list and getSongs returns undefined.

It’s only when I use vue-devtools and commit from it manually, the changes are getting reflected. Am I missing something here?

Thanks in advance.

const store = {

It should be called state, not store.

1 Like

I don’t have enough words to thank you!!
…and to describe my stupidity.

I’ll make sure to be careful next time :slight_smile: