使Vue模板等待AJAX​​调用返回的全局对象

时间:2018-10-08 11:03:00

标签: vue.js vuex

我正在尝试在一种字典中等待某些字符串,其中该字典包含按钮,区域,标签等的所有文本。

首先,我将默认字符串列表发送给控制器,以在所有特定字符串不存在的情况下向CMS注册所有字符串。之后,我返回一个新对象,其中包含我的“字典”,但具有当前语言的正确值。

我使用事件监听器运行该调用,该事件监听器触发dispatch()上的window.onload,然后将数据添加到Vuex模块状态。然后,将其添加到计算的道具中。

computed: {
    cartDictionary() {
        return this.$store.state.dictionaries.myDictionaries['cart']
    }
}

现在是问题所在:在我的模板中,我尝试从cartDictionary prop(它是一个数组)中获取值。

<h2 class="checkout-section__header" v-html="cartDictionary['Cart.Heading']"></h2>

但是当组件渲染时,prop还没有值,因为它正在等待AJAX​​调用完成。因此,我当然会遇到cannot read property of undefined错误。

有关如何解决此问题的任何想法?我想通过全局对象访问字典,而不是通过props传递所有内容,因为它是使用原子设计构建的,这将是非常烦人的。

编辑: 添加更多代码进行澄清。

我的模块:

const dictionaryModule = {
namespaced: true,
state: {
    dictionaries: []
},
mutations: {
    setDictionaries (state, payload) {
        state.dictionaries = payload
    }
},
actions: {
    getDictionaries ({commit}) {
        return new Promise((resolve, reject) => {
            Dictionaries.init().then(response => {
                commit('setDictionaries', response)
                resolve(response)
                })
            })
        }
    }
}

我的商店:

const store = new Vuex.Store({
    modules: {
        cart: cartModule,
        search: searchModule,
        checkout: checkoutModule,
        filter: filterModule,
        product: productModule,
        dictionaries: dictionaryModule
    }
})

window.addEventListener('load', function () {
    store.dispatch('dictionaries/getDictionaries')
})

2 个答案:

答案 0 :(得分:1)

我也希望看到更多代码,但是由于我无法评论您的问题(您需要rep> 50),所以就可以了...

我有两个一般性建议:

  • 您是否正确设置了操作?突变始终是同步的,而动作允许异步操作。因此,如果您的http客户返回了一个Promise(例如,axios),则应在调用相应的变异之前等待操作结果。请参阅官方vuex-docs中的本章:https://vuex.vuejs.org/guide/actions.html

  • 您不应使用诸如window.onload之类的东西,而应使用Vue.js提供的钩子。检查以下内容:https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

  • 编辑:作为第三个建议:检查是否正确调用了操作和突变。如果它们在自己的模块中处理,则必须将模块注册为该状态。

答案 1 :(得分:1)

我认为您可以观看cartDictionary并设置另一个数据变量。

像这样

<h2 class="checkout-section__header" v-html="cartHeading"></h2>



data () {
    return {
      cartHeading: ''
    }
},
watch: {
  'cartDictionary': function (after, before) {
    if (after) {
      this.cartHeading = after
    }
  }
}

因为this.$store.state.dictionaries.myDictionarie一开始是未定义的,所以vuejs无法映射myDictionarie ['core']。这就是为什么您的代码无法正常工作的原因。

您也可以这样做

state: {
    dictionaries: {
        myDictionaries: {}
    }
}

并在解析过程中设置dictionaries键值。