Me gustaría importar dinámicamente (no estáticamente) funciones en un componente dentro de <script setup> ... </script>
Las funciones están en un archivo pme-check.js .
import { useStore } from 'vuex'; const store = useStore(); function foo() { console.log('foo'); } function bar() { console.log('bar'); } export { foo, bar };En el componente, importo dinámicamente mis funciones así y funciona correctamente.
import(`../composables/profil/${store.state.formation.profil}-check`).then( (module) => { console.log(module.foo()); // -> 'foo' console.log(module.bar()); // -> 'bar } );Pero de esta manera, no se puede acceder a mis funciones por nombre en el componente.
Cómo obtener foo() y bar() en cualquier lugar de las etiquetas <script setup> del componente.
Gracias
Si desea usar foo() y bar() en cualquier parte del archivo, debe usar require en lugar de import y el código debería verse así:
const profil= require(`../modules/${store.state.profil}`); // once you required it, you can use it in any place in the component. profil.foo(); profil.bar();Todo me funciona en Vue 3.
Puede asignar las funciones importadas a ref s 1️⃣ y luego usar las funciones a través del value de ref 2️⃣:
<script setup> import { ref, watchEffect } from 'vue' let foo = ref() let bar = ref() watchEffect(() => { import(`../composables/profil/${store.state.formation.profil}-check`) .then((module) => { 1️⃣ foo.value = module.foo bar.value = module.bar }) }) const fooAndBar = () => { 2️⃣ foo.value() bar.value() } </script>