vuex action api call не обновляет dom

Question

Я использую vuex Actions для вызова api для получения данных.На вкладке сети я вижу данные, которые успешно загружаются, но они не отображаются каждый раз.Я должен перезагрузить страницу несколько раз, чтобы отобразить ее.

что такое решение?

Footer.vue

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

и шаблон:

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

и это 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
    }

и я отправил действия в компонент Main, называемый App.vue, в созданный хук.

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

Пожалуйста, дайте мне знатьрешение?

Спасибо.http://uupload.ir/files/6k5d_ezgif-4-6c8b9e45ac01.gif

---

обновление:

я обнаружил, что dom не обновляется при вызовах API.

нет проблем с данными и индексами.

как показано на этом изображении:

когда я нажму на searchBox и searchbox данные будут верны, dom обновится.

я нене знаю, почему это случилось?

Answer 1

Какова длина социальных сетей? когда компонент создан. Так что индекс социальных сетей может быть вне диапазона.