vuex action api call不会更新dom

Question

I'm using vuex Actions to call api for getting data. On the network tab, I can see data that loads successfully, but it doesn't display every time. I have to reload the page repeatedly to display it.

what is the solution?

Footer.vue

            ...mapGetters([
                'getInfo',
                'getSocials'
            ])

and template:

  <li><i class="fas fa-phone"></i> تلفن تماس: <a :href="`tel:${getInfo.number}`">{{ getInfo.number
                            }}</a></li>
                        <li><i class="fas fa-envelope"></i> ایمیل: <a :href="`mailto:${getInfo.email}`" class="roboto">{{
                            getInfo.email }}</a></li>
                        <li><i class="fab fa-telegram-plane"></i> تلگرام: <a :href="getSocials[1]"
                                                                             class="roboto">@telegram</a></li>
                        <li><i class="fab fa-twitter"></i> توییتر: <a :href="getSocials[3]" class="roboto">@twitter</a>
                        </li>
                        <li><i class="fab fa-instagram"></i> اینستاگرام: <a :href="getSocials[0]"
                                                                            class="roboto">@instagram</a></li>
                        <li><i class="fab fa-linkedin-in"></i> لینکدین: <a :href="getSocials[2]"
                                                                           class="roboto">@linkedin</a></li>

and this is vuex:

   state: {
        socials: [],
        info: {}
    },
    mutations: {
        SET_SOCIALS(state, val) {
            state.socials.push(val)
        },
        SET_INFO(state, val) {
            state.info.title = val.title
            state.info.number = val.number
            state.info.about = val.about_me
            state.info.email = val.mail
        }
    },
    actions: {
        setSocials({commit}) {
            Http.get("/config")
                .then(response => {
                    let social = response.data.socialmedia;
                    for (const [key, value] of Object.entries(social)) {
                        commit('SET_SOCIALS', `https://${value}`)
                    }
                })
        },
        setInfo({commit}) {
            Http.get("/config")
                .then(response => {
                    let res = response.data.site.info;
                    commit('SET_INFO', res)
                })
        }
    },
    getters: {
        getSocials: state => state.socials,
        getInfo: state => state.info
    }

and i dispatched actions in Main component called App.vue in created hook.

            this.$store.dispatch('setSocials');
            this.$store.dispatch('setInfo');

Please let me know the solution?

Thanks. http://uupload.ir/files/6k5d_ezgif-4-6c8b9e45ac01.gif

---

update:

i found that dom is not updating when api calls.

there is no problem with data and indexes.

as this image show:

when i click on the searchBox and searchbox data will be true, dom will update.

i don't know why is this happen?

Answer 1

How the socials's length is existed ? when component created. So the index of socials maybe out of range.