vuex action api调用不更新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
    }

我在创建的钩子中调用了名为 App.vue 的主组件中的操作。

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

请告诉我解决方案？

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

---

更新：

我发现当api调用时dom没有更新。

数据和索引没有问题。

如图所示：

当我点击 searchBox 并且searchbox 数据为真时，dom 将更新。

我不知道为什么会这样？

Answer 1

社交的长度是如何存在的？组件创建时。所以socials的索引可能超出范围。