关于javascript:Vue组件无法读取异步状态更改

Vue component can't read async state change

我为网上商店结帐页面提供了Vue组件,我想在其中调用一个函数来填充基于用户个人资料数据的帐单地址信息输入。用户个人资料信息是从API加载的。此调用是异步的,并使用应用程序index.js文件中的Vuex操作分派来完成。 (我们也在其他地方使用了用户个人资料信息,而不仅仅是结帐页面)

基本上发生的是在存储状态填充用户数据的同时安装组件。我无法根据状态更新的时间实际触发功能,因为组件无法检测到何时可用该数据做到这一点。如何使组件检测数据何时可用或等待数据?

我不想将输入绑定到状态,因为我有多个地址,并且用户可以选择自己喜欢的任何东西。然后必须将来自输入的地址信息发送到API,以便可以将其保存为订单。因此,我宁愿将其放在组件数据上:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
data (): IState {
  return {
    delivery_address: {
      name: '',
      streetAddress: '',
      postalCode: '',
      city: '',
      country: ''
    },
    billing_address: {
      name: '',
      streetAddress: '',
      postalCode: '',
      city: '',
      country: ''
    }
  }
}

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

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

我尝试将手表设置为此:

1
2
3
4
5
watch: {
    user (newUser, oldUser) {
      console.log(newUser)
    }
}

我尝试设置商店手表

1
2
3
4
5
6
7
mounted(): {
   this.$store.watch((state) => state.user,
    (user: any) => {
    console.log(user)
  })
  }
}

这些方法实际上都无法帮助您告诉我用户个人资料数据可用。正确的解决方法是什么?


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

1
2
3
4
5
6
7
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;
  }
}