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

时间:2019-11-19 19:54:48

标签: javascript vue.js

我有一个网上商店结帐页面的Vue组件,我想在其中调用一个函数来填充基于用户个人资料数据的帐单地址信息输入。用户个人资料信息是从API加载的。此调用是异步的,并使用应用程序index.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)
  })
  }
}

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

1 个答案:

答案 0 :(得分:0)

Vuex操作返回承诺,因此您可以在操作调用中添加public class EveryNth { String value = "abcabcabcabc"; StringBuilder sb = new StringBuilder(); int nth = 3; @Test public void tryIt() { everyNthAgain(nth); assertEquals("cccc", sb.toString()); } public void everyNthAgain(int curr) { if (curr <= value.length()) { sb.append(value.charAt(curr - 1)); everyNthAgain(curr + nth); } } } 来知道何时完成:

.then()