Estoy tratando de enumerar las instancias de un componente Vue para garantizar identificaciones únicas, y para eso uso un generador simple. Normalmente iniciaría el generador fuera de la función de setup :
const idGen = generateIds("component:my-component"); export default { setup() { const id = idGen.next().value; return { id, // eg "component:my-component/0042" }; }, }; Sin embargo, con <script setup> sugar no estoy exactamente seguro de cómo se hace esto. Sé que puedo ejecutar efectos secundarios en otro bloque <script> que solo se ejecutará una vez:
<script> const idGen = generateIds("component:my-component"); </script> Sin embargo, no sé si debo acceder al idGen compartido en mi <script setup> para incrementar el enumerador y obtener la identificación única.
<script setup> // Where do I get idGen from the above <script>? const id = idGen.next().value; </script> La única forma que se me ocurre de hacer esto mientras uso el azúcar <script setup> es iniciar el generador en un archivo separado:
<script setup> import { idGen } from "./id-generator.js"; const id = idGen.next().value; </script>El único problema es que es un poco molesto crear un archivo separado solo para esta pequeña lógica que pertenece en gran medida al componente, por lo que lo evitaría si pudiera.
Editar: resulta que el orden es irrelevante después de todo
cualquier <script> se ejecutará normalmente
el código dentro de <script setup> se convierte/compila en una función de "configuración" de API de composición , y cuando se llama, todo el código de nivel superior en otro <script> ya se habrá ejecutado, por lo tanto, idGen ya estará disponible
asi que
Ignora el resto de esta respuesta.
La mayoría de los ejemplos de vue3 <script setup> que usan otro <script> siempre muestran el orden
<script setup></script> <script></script>En tu caso, esto no funcionará.
Sin embargo, si los guiones están en este orden
<script> const idGen = generateIds("component:my-component"); </script>después
<script setup> const id = idGen.next().value; </script> entonces idGen estará disponible dentro de <script setup>
Nota: puede tener tantas etiquetas <script> en su SFC como desee, en cualquier orden, pero solo una <script setup>