Vue 组件无法读取异步状态更改

Question

我有一个用于网店结账页面的Vue组件，我想在其中调用一个函数，根据用户配置文件数据填充账单地址信息输入。用户配置文件信息是从API加载的。这个调用是异步的，使用来自appindex.js文件的Vuex操作调度来完成。(我们在其他地方也使用用户档案信息，而不仅仅是结账页面(

基本上，不断发生的事情是在存储状态填充用户数据的同时装载组件。我无法根据状态更新的时间实际触发函数，因为组件无法检测此数据何时可用。如何使组件检测数据何时可用或等待数据

我不想将输入绑定到状态，因为我有多个地址，用户可以选择他喜欢的任何地址。然后必须将输入的地址信息发送到API，以便为订单保存地址信息。所以我宁愿把它放在组件数据上：

data (): IState {
return {
delivery_address: {
name: '',
streetAddress: '',
postalCode: '',
city: '',
country: ''
},
billing_address: {
name: '',
streetAddress: '',
postalCode: '',
city: '',
country: ''
}
}
}

我试图做的是有一个返回状态的计算用户函数：

user (): any {
return this.$store.state.user
}

我试着将手表设置为：

watch: {
user (newUser, oldUser) {
console.log(newUser)
}
}

我试过设置商店手表

mounted(): {
this.$store.watch((state) => state.user,
(user: any) => {
console.log(user)
})
}
}

这些方法实际上都没有帮助告诉我用户配置文件数据是可用的。正确的方法是什么？

Answer 1

Vuex操作返回promise，因此您可以在操作调用中添加一个.then()来知道它何时完成：

mounted() {
this.$store.dispatch('loadUser').then(() => {
// Update component state here
console.log('User loaded: ', this.$store.state.user);
this.delivery_address = this.$store.state.user.delivery_address;
}
}