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

Question

我正在尝试在包含按钮、部分、标签等所有文本的字典中等待某些字符串。

我首先将默认字符串列表发送到控制器，该控制器将所有字符串注册到我的 CMS，以防这些特定值不存在。之后，我返回一个包含我的“字典”的新对象，但具有当前语言的正确值。

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

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

所以现在的问题是：在我的模板中，我尝试从 cartDictionaryprop 获取值，这是一个数组。

<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')
})

Answer 1

我也希望看到更多您的代码，但由于我无法评论您的问题（您需要 rep > 50），所以就这样...

我有两个一般性建议：

• 您是否正确设置了操作？突变总是同步的，而动作允许异步操作。因此，如果您的 http 客户端返回了一个承诺（例如，axios 确实如此），您应该在调用相应的突变之前等待您的操作中的结果。本章见官方 vuex-docs：https://vuex.vuejs.org/guide/actions.html

• 您不应该使用诸如 window.onload 之类的东西，而应使用 Vue.js 提供的钩子。检查这个：https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

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

Answer 2

我认为您可以观看 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 键值。