Data store provider components

[mhelaiwa]

What problem is this solving

It's not that much of a problem .. But I am of that kind of people who feel it a tedious process to import the useStore and execute it to just use a single state item inside the template.

Proposed solution

A built-in renderless data provider component which passes the store to the template through a the default slot. In fact I use this method inside my projects but it would be good if there is a built-in component for this purpose.

Define a renderless data-provider component

/**
* StoreProvider.vue
* A renderless store-provider component
*/

<script lang="ts">
import {defineComponent} from "vue";
import {useLayoutStore} from "@/js/store";

export default defineComponent({
    setup(props: any, ctx) {
        const store = useLayoutStore()
        return () => ctx.slots.default(store)
    }
})
</script>

Import the component globally

/**
* main.js
*/

import StoreProvider from '@/store/components/StoreProvider.vue'
createApp({render: () => h(App, props)})
    .use(pinia)
    .component('StoreProvider', StoreProvider)
    .mount('#app')

Use the provider inside your app

/**
* DefaultLayout.vue
*/

<template>
   ...
   <StoreProvider #default="store">
      <button@click="store.toggleDrawer" > Toggle App Drawer </button>
   </StoreProvider >
   ...
</template>

Describe alternatives you've considered

It would be very nice if this component has a props to accept the name of the store to dynamically import and provide it.