Imagine que tengo una aplicación que tiene 10 componentes que son similares en algunos aspectos, pero contienen contenido diferente y algunas diferencias funcionales. Pero todos reciben los mismos 3 accesorios como base (en otras palabras, pueden definir más, pero todos definen al menos tres accesorios específicos), también tienen 1 emisión en común. También llaman a const store = useStore() y tienen la misma propiedad calculada que extrae un valor de la tienda vuex.

¿Hay alguna manera de que pueda crear una estrategia componible u otra para permitir que estos componentes compongan o hereden estas líneas de código comunes que se repiten actualmente en el archivo src.

Ejemplo:

 //component 1 <script lang="ts" setup> import { useStore } from 'vuex'; const store = useStore(); const props = defineProps<{ a: number; b: string; c: boolean; uniqueToComp1: string; }>(); const foo = computed(() => store.state.bar[props.a]); const uniqueConstForComp1 = computed(() => props.a + Math.random()); const emit = defineEmits<{ (e: 'exit'): void; }>(); </script>

Y otro ejemplo:

 //component 2 <script lang="ts" setup> import { useStore } from 'vuex'; const store = useStore(); const props = defineProps<{ a: number; b: string; c: boolean; uniqueToComp2: Function; }>(); const foo = computed(() => store.state.bar[props.a]); const uniqueConstForComp2 = computed(() => props.a - 8); const emit = defineEmits<{ (e: 'exit'): void; }>(); </script>

Observe cómo hay muchas repeticiones entre estos dos, pero hay diferencias clave.