Type safe vue context stores

import { inject, provide, type InjectionKey } from "vue";

export function defineContextStore<T, O>(setup: (options: O) => T) {
	const contextKey: InjectionKey<T> = Symbol();

	function consumeStore() {
		const context = inject(contextKey);
		if (!context) {
			throw new Error(
				"useStore must be used within a component that has provideStore provided"
			);
		}
		return context;
	}

	function provideStore(options: O) {
		const state = setup(options);
		provide(contextKey, state);
		return state;
	}

	return {
		consumeStore,
		provideStore,
		contextKey
	};
}

export const {
  consumeStore: consumeProductStore,
  provideStore: provideProductStore
} = defineContextStore((options: {productId: string}) => {
  const product = ref();
  const reviews = ref();
  function fetchProduct(){}
  function fetchReviews(){} 
  return {
    productId: options.productId,
    fetchProduct,
    fetchReviews,
    product,
    reviews
  }
})

<template>
    <ProductReviews />
</template>
<script setup lang="ts">
import ProductReviews from "./ProductReviews.vue";
import { provideProductStore } from "./product-store";
provideProductStore({ productId: "9" });
</script>

<script setup lang="ts">
import { consumeProductStore } from "./product-store";
const { reviews } = consumeProductStore();
</script>