我正在尝试在一种字典中等待某些字符串,其中该字典包含按钮,区域,标签等的所有文本。
首先,我将默认字符串列表发送给控制器,以在所有特定字符串不存在的情况下向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')
})
答案 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
键值。