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

社交活动的长度如何存在？创建组件时。因此，社交指数可能超出范围。

vuex动作api调用不会更新dom

1 个答案: