我有一个Vuex店在我的应用程序定义getters，actions和mutations。现在，一个动作从API请求数据，并将接收到的数据提交给操作状态的变异。此特定操作（名为initConfiguration）加载了一些元数据和配置，必须先将这些元数据和配置应用于存储，然后才能执行后续操作。在我的根组件中，mounted生命周期挂钩函数中有一些初始化代码，如下所示：
new Vue({
el: '#app',
store,
render: h => h(App),
mounted() {
store.dispatch('initConfiguration').then(() => {
store.dispatch('loadData')
})
}
})
我面临的问题是loadData在调用下一个动作之前状态尚未更改，因此由于缺少/未初始化的数据，该动作失败了。由于最终可能会调用多个动作，因此我想避免loadData从动作中直接分派initConfiguration动作（而且据我了解，必须避免通过突变调用动作）。
这是我的商店实施...
export default Vuex.Store({
state: {
metadata: {
initialized: false,
config: { }
}
},
mutations: {
setConfiguration(state, config) {
state.metadata.config = config
state.metadata.initialized = true
}
},
actions: {
initConfiguration({commit}) {
axios.get('configuration').then((response) => {
commit('setConfiguration', response.data)
})
},
loadData({commit, state}) {
axios.get(state.metadata.config.tenantDataUrl) // crashes here due to undefined data
.then((response) => { ... });
}
}
})
如何正确链接动作，并确保状态在两者之间得到更新？
您需要退还axios承诺。向每个axios调用添加返回值，您的现有代码将起作用。
您也可以这样重写
new Vue({
el: '#app',
store,
render: h => h(App),
async mounted() {
await store.dispatch('initConfiguration')
await store.dispatch('loadData')
}
})
。
export default Vuex.Store({
state: {
metadata: {
initialized: false,
config: { }
}
},
mutations: {
setConfiguration(state, config) {
state.metadata.config = config
state.metadata.initialized = true
}
},
actions: {
async initConfiguration({commit}) {
const response = await axios.get('configuration')
commit('setConfiguration', response.data)
},
async loadData({commit, state}) {
const response = await axios.get(state.metadata.config.tenantDataUrl) // crashes here due to undefined data
// do whatever with response, or try/catch
}
}
})
如果您需要在每个步骤中更新vue模板，请添加此
new Vue({
el: '#app',
store,
render: h => h(App),
async mounted() {
await store.dispatch('initConfiguration')
await this.$nextTick() // cause vue to run getters and update computeds
await store.dispatch('loadData')
}
})
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句