Vue 组件无法读取异步 state 更改

Question

I have a Vue component for a web shop checkout page where I want to call a function to populate billing address information inputs based on User profile data. The User profile information is loaded from an API. This call is asynchronous and done using a Vuex action dispatch from the app index.js file. (We use user profile information elsewhere too, not just checkout page)

Basically what keeps happening is the component mounts at the same time as when the store state gets populated with user data.I am unable to actually trigger a function based on when the state updates because the component cannot detect when this data is available to it. How can I make the component either detect when the data is available, or wait for it?

I don't want to bind inputs to the state, because I have multiple addresses and the user gets to pick whatever he likes. The address information from the inputs then have to be sent to the API so that they can be saved for the order. So I'd rather have it on the component data:

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

What I've tried to do is have a computed user function that return state:

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

I have tried setting watches to this:

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

I have tried setting store watch

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

None of these methods actually help do anything to tell me that the user profile data is available. What is the correct way to go about this?

Answer 1

Vuex actions return promises, so you can add a .then() to the actions call to know when it is complete:

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;
  }
}