[Vuejs]-Vue cant work with data from composable function

by

1👍

The composable returns subscription immediately, but the actual data is set when the async function fetchSubscription() is resolved. You log the value before that happens, so you get null. Seems to be all in order.

One way or another, you will have to use some sort of loading mechanism. Either you build it into the component directly and use the isLoading ref you already return. Or you could change your composable to return the promise, and use it with the suspense builtin, which will make Vue wait for the promise to resolve before rendering the component.

Here is a snippet showing how you could use suspense with an async component and a composable:

const { createApp, ref } = Vue;

const useAsyncComposable = function(){
  const text = ref('not loaded')
  const load = async () => text.value = await new Promise(resolve => setTimeout(() => resolve('composable has finished loading'), 3000))
  const promise = load()
  return {text, promise}
}

const AsyncComponent = {
  template: '<div>{{ text }}</div>',
  async setup(props, { attrs, slots, emit, expose }) {
    const {text, promise} = useAsyncComposable()
    await promise
    return {text}
  }
}

const App = { 
  components: { AsyncComponent },
}
const app = createApp(App)
app.mount('#app')
<div id="app">
  <suspense>
    <template #default>
        <async-component />
    </template>
    
    <template #fallback>
      <div>Suspense fallback while waiting for async component</div>
    </template>
    
  </suspense>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
👤Moritz Ringler

Leave a comment