Vuex가 구성 요소를 업데이트하지 않음

Vuex가 구성 요소를 업데이트하지 않음

나는 TypeScript에서 Vue와 Vuex로 사이트를 만들고 있다. (긴 코드 예에 대해 미안)

스토어 모듈('뮤직아트리스트')

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,
};

그리고 내게는 구성 요소가 있다.

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

이 구성요소는 하위 페이지에 있다.페이지로 이동하면 출력물과 페이지에 처음에는 '예술가'가 없음, 즉 배열이 비어 있음으로 표시된다.그런 다음 API 호출로 '예술가'를 로드하고 콘솔을 통해 '예술가'가 '국가'로 로드되었는지 검증한다.그러나 페이지는 새로운 정보로 업데이트되지 않으며, 아티스트도 카운트도 업데이트되지 않는다. (아티스트 구성요소는 아티스트 이름만 표시한다.

내가 정말 단순하고 바보 같은 짓을 하고 있거나(완전히 가능) 아니면 다른 일이 있는 거야?

내가 생각해 낼 수 있는 최선은 '이것'에 접근하기 위해 장식가 대신 Vuex를 버리고 코드를 교실로 옮기는 것이다.나는 상점에서 이것을 시도해 봤지만 여전히 운이 없었다.

@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);
                },
            );
        }
    }
}

참조URL: https://stackoverflow.com/questions/52322256/vuex-not-updating-component