Acabo de empezar a aprender Vue y Vuex. Vi que tengo el mismo código en diferentes componentes. Empecé a usar Vuex y almaceno mis datos dentro de index.js y es realmente útil. Mi pregunta es, ¿cómo puedo almacenar funciones de clic con vuex. En el siguiente código hay un ejemplo simple
<button @click="clickMe">Click Me</button> methods: { clickMe() { console.log('Hellouu') }, }Mantener la lógica de un componente en sí mismo es de lo que se trata el enfoque basado en componentes. Un detector de clics en un componente o su subelemento es muy personal y privado para un componente.
Pero... supongamos que tiene una situación en la que tiene exactamente la misma lógica que debe ejecutarse al hacer clic en varios componentes, la respuesta será usar mixins . La tienda no es el lugar para hacerlo . Esto es válido para cualquier caso en el que necesite 'compartir funcionalidades reutilizables'.
Además de proporcionar flexibilidad, los mixins tienen una serie de beneficios, por ejemplo, puede aprovechar las reglas de combinación de opciones dentro de los mixins para anular el método onClick() descrito en un mixin para atender un caso especial dentro de uno de los componentes, pero continúe usando el resto de la lógica común que contiene el mixin.
Nota: Sin embargo, tenga cuidado, las Hook functions con el mismo nombre se fusionan en una matriz para que se llamen a todas. Los ganchos de mezcla se llamarán antes que los ganchos propios del componente.
Como un gran ejemplo del mundo real, consulte este repositorio: https://github.com/buefy/buefy . Es una biblioteca de componentes de interfaz de usuario construida con Vuejs. Puede encontrar muchos más ejemplos y mejores prácticas en tales repositorios de código abierto y estos son siempre un gran punto de referencia para escribir un mejor código.