Nuxt•17mo ago

How to create a stateful composable that uses useState?

So I am refactoring my app and I am replacing pinia stores with composables. If I want a global state that is shared with all instances of that composable, I need to define this ref outside of the exported function. Like this:

const globalState = ref();
export default () => { 
      // [...]
      return {
        // [...]
        state: readonly(globalState),
    };
}

const globalState = ref();
export default () => { 
      // [...]
      return {
        // [...]
        state: readonly(globalState),
    };
}

However, if I want to use useState, I cannot do that outside of the composable function. What now?

ParadoXOP•8/9/24, 12:25 PM

Bonus question: Inside my composable useSearch that exports a function that returns this:

Somewhere else I might use it like that:

Is there a way of accessing data, pending, status and error inside the composable itself?

I need those to be part of the gobale state

Cake•8/9/24, 12:43 PM

foo here would be global

PParadoX Bonus question: Inside my composable useSearch that exports a function that retu...

Cake•8/9/24, 12:45 PM

in this example u're using a composable inside a function, not top level, which is where composables should be called/used

u can instead use directly and implement the loading/error states in a // block

ParadoXOP•8/9/24, 12:46 PM

But I want to use useAsyncData because of SSR.

ParadoXOP•8/9/24, 12:46 PM

In order to avoid double requests

ParadoXOP•8/9/24, 12:47 PM

I'll try this approach: https://medium.com/@cybercoder.naj/handle-global-state-management-in-nuxt3-468e5b3e7901

Medium

Handle Global State management in Nuxt3

Developers usually follow the principle not to expose state in areas where it is not needed. In order to keep this principle intact, we…

ParadoXOP•8/9/24, 12:47 PM

But it feels a bit wonky to pass the results back to the composable after calling it from outside