Solo me pregunto si esta es la forma correcta de compartir funcionalidad (no datos, para eso uso tiendas) dentro de una aplicación Quasar-/Vue3:
// boot/generic_stuff.js import {boot} from 'quasar/wrappers' const function_list = { /* stuff in here */ }; export default boot(async ({app}) => { app.provide('my_functions', function_list); app.provide('my_api_key', 'abc-def'); });En mi componente Vue, hago esto:
<template> This is my key: {{ my_api_key }} </template> <script> import { inject } from "vue"; export default { name: 'MyComponentsName', setup() { const $my_functions = inject('my_functions'); const $my_api_key = inject('my_api_key'); $myFunction.callToSomeFunction(); return { my_api_key: $my_api_key } } } </script>¿Es este el camino a seguir si no quiero importar muchas cosas, como Axios, o funciones que necesito dentro de varios scripts, como filtros, etc.?
Para las partes reutilizables de su aplicación, los componibles son lo que está buscando.
En el contexto de las aplicaciones de Vue, un "componible" es una función que aprovecha la API de composición de Vue para encapsular y reutilizar la lógica con estado.
La estructura es la siguiente:
import { ref, onMounted, onUnmounted } from 'vue' // by convention, composable function names start with "use" export function useSample() { ... } <script setup> import { useSample } from './sample.js' const { x, y, z } = useSample() </script>Siga los documentos para obtener una guía detallada con las mejores prácticas y convenciones de nomenclatura.