javascript - Axios GET 没有显示所有数据。我需要打第二个电话才能接他们

Question

我有一个带有表格的 vue 组件

<v-client-table
            ref="table"
            :data="artists"
            :columns="columnsDatatable"
            :options="optionsDatatable"
            @row-click="rowDetail"
        >
            <!-- ID -->
            <template v-slot:id="props">
                <small>#{{ props.row.id }}</small>
            </template>

            <!-- Fullname -->
            <template v-slot:fullname="props">
                {{ props.row.lastname }} {{ props.row.name }}
            </template>
        </v-client-table>

它从在 mount() 期间调用的 Vuex 突变中获取数据

mounted() {
        this.fetchArtists();
    }

当我将数据存储到 dBase 并更新 vuex 数组艺术家时，表格只显示了其中的一部分。为了解决我必须重新加载页面的问题，让组件让 axios 再次获取并最终看到我需要的所有数据。我想知道为什么会发生任何想法？

这里是 fetch 动作

async fetchArtists({commit}) {
             axios.get(config.backend + "/artists")
                .then(res => {
                    commit("SET_ARTISTS", res.data.data);
                    console.log("mounted", res.data.data);
                }) 
                .catch();
        },

这里是 saveArtist 动作

async saveArtist({ state, dispatch, commit }, [artist, contacts, address, certificates]) {
            
            // Save
            await axios.post(config.backend + "/artists", artist)
                .then(res => {
                
                    let id = res.data.data.id;
                    
                    contacts.contactable_id = address.addressable_id = certificates.certificatable_id = id;
                    contacts.contactable_type = address.addressable_type = certificates.certificatable_type = 'App\\Models\\Artist';

                    if (!!contacts.first_email) {
                        axios.post(config.backend + "/contacts", contacts)
                            .then(res => console.log(res))
                            .catch(err => console.log(err));
                    }
                    
                    if (!!address.address) {
                    axios.post(config.backend + "/addresses", address)
                        .then(res => console.log(res))
                        .catch(err => console.log(err));    
                    }
                    
                    let fullArtist = artist;
                    fullArtist.contact = contacts;
                    fullArtist.map = address;

                    commit('PUSH_TO_ARTISTS', fullArtist);
                    
                    commit('common/SET_ALERT_TITLE', 'CREATED', { root: true });
                    commit('common/SET_ALERT_MESSAGE', 'Artist has been created!', { root: true });
                    commit('common/SET_ALERT_COLOR', 'success', { root: true });
                })
                .catch(err => console.log(err));
        },

标签： javascriptvue.jsaxios