Vuex Not Updating Component

user_2329474 0
Viewed 680

I am building a site with Vue and Vuex in TypeScript. (Sorry for the long code examples)

I have a Store Module ('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,
};

And I 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 { Action, State } from "vuex-class";

import Artist from "@/components/music/Artist.vue";
import { MusicArtist } from "@/common/models/music-artist";
import { Providers } from "@/providers";
import store from "@/store/index";
import { Title } from "@/common/html/title";


@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>

This component is on a sub page. When I navigate to the page, the outputs and the page initially show there are no 'artists', ie the array is empty. Then the API calls to load the 'artists' and the console out verifies that the 'artists' have been loaded to state. But the page does NOT update with the new information, neither the artists nor the count. (The Artist component just displays the name of the artist).

Either I'm doing something really simple and stupid (totally possible) or there is something else???

vuex-modules vuex vue.js typescript
1 Answers

The best I can come up with is dumping Vuex and moving the code into the class instead of the decorators to access 'this'. I tried this with the store and still didn't have luck.

@Component({
    components: {
        Artist,
    },
})
export default class Audio extends Vue {
    artists:MusicArtist[];

    constructor() {
        super();
        this.artists = [];
    }

    created() {
        console.log("length", this.artists.length);
        if (!this.artists.length) {
            Providers.musicArtists.getAll(
                (musicArtists: MusicArtist[]) => {
                    console.log("MusicArtist!", musicArtists);
                    this.artists = musicArtists;
                },
                (error: Error) => {
                    console.log("Error!", error);
                },
            );
        }
    }
}
user_23294740
Related