vue-3-composables-in-global-namespace.md

Vue 3x composables in the global namespace

#COMPOSABLE #GLOBAL #VUE3

Warning: This is just an exploration and not a best practice! To better understand the concept, read about Composables in the Vue documentation.

Composables are usually component-scoped. That means you cannot invoke the composable function in two separate components and have the composable variables in sync. However, for limited use cases, you can use the provide-inject functions in Vue 3x to create singletons of your composables accessible everywhere.

The factory function bellow is only required when you want to provide arguments to your composables before placing them in the memory of the provide function.

src/App.vue

<script setup lang="ts">
  import {provide} from 'vue';
  import {MyServiceFactory} from './components/MyService';

  const factory = (factoryCallback: Function) => { // +3
    let self: any = null; // The composable or service captured thanks to the closure bellow
    return (...args: any) => { // This function is the global value which wraps the composable and makes it act like a singleton. \n Player.vue / <script setup> / let {play, pause, etc} = (inject('myService') as Function)(/* Put your arguments here if needed */);
      if (! self) {
        self = factoryCallback(...args); // The composable is created once and it NEVER changes much like a singleton
      }
      return self;

      // ↪ Optional: Return a function (indirect) or an object (direct): const factory = (factoryCallback: Function): Function|Object => { let self: any = null; /* Wrap the factory function with another function */ if (typeof factoryCallback == 'function') { return (...args: any) => { console.log('factory', { self, factory }); if (! self) { self = factoryCallback(...args); } return self; }; } /* Just some value and nothing to wrap */ return factoryCallback; }; #COMPOSABLE #GLOBAL
    };
  };

  provide('myService', factory(MyServiceFactory));
</script>

src/components/MyService.ts

export function MyService() { // The composable function. The idiomatic name would follow the structure of ``useFoo``
  const foo = ref(1);
  const bar = ref(2);
  const baz = ref(3);
  ...
  return {
    foo,
    bar,
    baz,
  };
}

export function MyServiceFactory(/* Your arguments here */) { // This function will have to be called in every component where you want to inject the service: const {foo, etc} = (inject('myService') as Function)();
  return MyService(/* Your arguments here */); // The factory is a simple function which takes your arguments at runtime and creates your composable. You can pass arguments when you invoke it: const {etc} = (inject('myService') as Function)(123, 'abc'));
}

src/components/ComponentA.vue

<script setup lang="ts"> / ... / let {foo, etc} = (inject('myService') as Function)(/* Put your arguments here if needed */); // ... You have to repeat the factory whenever you call inject

src/components/ComponentB.vue

<script setup lang="ts"> / ... / let {bar, etc} = (inject('myService') as Function)();

src/components/ComponentC.vue

<script setup lang="ts"> / ... / let {baz, etc} = (inject('myService') as Function)();

This way, no matter the component which injects the service, the exposed variables (foo, bar, baz) will be in sync in all of the components.