Search code examples
vue.jsvuejs3composition

Run computed after call function in vue3


I use vue3 and I wanna set data in vuex and run computed after call API. but unfortunately, the computed run before the getProfile function. I use async-await but it doesn't work (I use console.log but I get it undefined).

    import { defineComponent, ref, computed, reactive, getCurrentInstance } from 'vue'
    import { useStore } from 'vuex'
    export default defineComponent({
      setup() {
        const internalInstance = getCurrentInstance()
        const axios = internalInstance.appContext.config.globalProperties.axios
        const searchDropdown = ref(false)
        let ProfileData = reactive({})
        const store = useStore()
        const showSearchDropdown = () => {
          searchDropdown.value = true
        }
        const hideSearchDropdown = () => {
          searchDropdown.value = false
        }
        const getProfile = () => {
          axios.get('users/profile/')
            .then(profile => {
              store.dispatch('profile/setProfile', profile.data)
            })
        }
        getProfile()
        ProfileData = computed(() => store.state.profile.ProfileData)
    
        console.log(ProfileData.value)
        return {
          searchDropdown,
          showSearchDropdown,
          hideSearchDropdown,
          getProfile,
          ProfileData
    
        }
      }
    })

Solution

  • Solved I use watch and v-if in template and I omitted async/await