I am currently working on a website using Vue and Vuex with TypeScript. (Apologies for the lengthy code samples)
Within my project, I have a Store Module called 'musicArtists':
const actions: ActionTree<MusicArtist[], any> = {
getAllArtists({ commit }): any {
Providers.musicArtists.getAll(
(musicArtists: MusicArtist[]) => {
console.log("MusicArtist!", musicArtists);
commit("setArtists", musicArtists);
},
(error: Error) => {
console.log("Error!", error);
},
);
},
};
const mutations: MutationTree<MusicArtist[]> = {
setArtists(state: MusicArtist[], artists: MusicArtist[]) {
state = artists;
console.log("setArtists", state, artists);
},
};
export default{
namespaced: true,
getters: {
},
state: {
artists : [],
},
mutations,
actions,
};
In addition to the Store Module, I also have a Component:
<template>
<div id="page-music-audio">
<Artist v-for="artist in artists" v-bind:artist="artist"/>
<h2>{{ count }}</h2>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { mapState } from "vuex";
import Artist from "@/components/music/Artist.vue";
import { MusicArtist } from "@/common/models/music-artist";
import { Providers } from "@/providers";
import store from "@/store/index";
@Component({
created: () => {
console.log("length", store.state.musicArtists.artists.length);
if (!store.state.musicArtists.artists.length) {
store.dispatch("musicArtists/getAllArtists", { root: true });
}
},
components: {
Artist,
},
computed: {
...mapState("musicArtists", ["artists"]),
count: () => {
return store.state.musicArtists.artists.length;
},
},
data: () => {
return {
store,
};
},
})
export default class Audio extends Vue {}
</script>
<style lang="scss">
</style>
However, upon navigating to the sub page where this component is located, it appears that initially there are no 'artists' displayed, as the array is empty. Subsequently, the API calls are made to load the 'artists' into the state, confirmed by console output. Strangely, the page does not update with the new information, failing to display the artists or the count. (The Artist component simply shows the name of the artist).
I'm questioning whether I have overlooked something very simple and obvious (entirely possible) or if there is another underlying issue at play???