Soy nuevo en NuxtJS y me gustaría usar window.addEventListener en un componente particular usado en mi página, pero también eliminar el evento cuando cambiamos la página.
En React, haría algo como esto:
export default function MyComponent({ close }) { useEffect(() => { const handleKey = (e) => console.log(e.key); window.addEventListener("keyup", handleKey); return () => window.removeEventListener("keyup", handleKey); }); return <div /> }Pero, ¿cómo hago el mismo comportamiento con NuxtJS 3?
<script setup lang="ts"> interface ComponentProps { close: () => void; } const props = defineProps<ComponentProps>(); // I want to use `window.addEventListener("keyup", props.close)`; // I'd do something like this: if (process.client) { window.addEventListener("keyup", props.close); } </script> <template> <div /> </template>El problema es ¿cómo elimino el evento una vez que el componente se desmontará? ¿Hay una mejor manera de hacer esto?
Se monta un gancho en el lugar correcto para la inicialización específica de DOM, esto no requerirá la verificación de process.client porque ocurre solo en el lado del cliente. Y está reflejado con gancho desmontado.
Es preferible forzar una devolución de llamada para que sea constante durante la vida útil porque cambiar un accesorio sin querer evitará que se elimine el detector de eventos:
const { close } = props; onMounted(() => { window.addEventListener("keyup", close); }) onUnmounted(() => { window.removeEventListener("keyup", close); })