Introduccion
Siempre me sorprendió la cantidad de acciones que debe realizar para la gestión del estado de los marcos: describa de inmediato el esquema, escriba mutaciones, comprométalas ... ¿Por qué no hacer que todo sea lo más simple posible?)
¿Por qué escribir código cuando no puedes escribirlo?
(actualizado)Te presento mi oficio de
media hora : ¡
Huex !
Hasta ahora, la solución solo está disponible en la plataforma NodeJS, pero creo que será suficiente para la presentación.
Descargo de responsabilidad: Huex fue escrito por mí solo con fines educativos y de entretenimiento, y no pretende ser un marco completo. Y tal vez lo reclama. Ahora vámonos.Para que sirve
Tener un único almacén de datos conveniente. Ser capaz de monitorear sus cambios. Se librará de palabras incomprensibles como "captadores", "mutadores", "acciones", "cometer", etc.
¿Cómo instalarlo?
Hasta ahora, solo copiando
este repositorio.
Después de copiar el repositorio, debe conectarlo a través de
package.json de su proyecto en algún lugar de este formulario:
"dependencies": { "huex": "file:../huex/" }
Después de eso, estará disponible como un módulo huex.
O haga que sea aún más fácil, como
dpr señaló correctamente:
npm i -S https://github.com/vssenko/huex.git¿Cómo usarlo?
Tan natural y simple como sea posible. Comencemos de inmediato con el código:
Y eso es todo. En cualquier cambio \ configuración del campo de nuestro almacenamiento se crearán dos eventos:
cambio con datos {clave, valor} y
cambio: clave con datos {valor}.
(actualizado)Y para los objetos anidados y las matrices, se crearán eventos tanto para el objeto anidado como para el padre.
Suficiente para crear proyectos de cualquier complejidad.
Tal vez algo más?
Por supuesto: puede crear campos profundamente anidados sobre la marcha, y no se crearán excepciones.
const Huex = require('huex'); const storage = Huex(); storage.abcde = 5;
Y, por supuesto, los controladores de eventos también se pueden colgar en todos los objetos anidados.
(actualizado)Tal vez algo más?
Si! Ahora Huex funciona no solo con datos simples, sino también con objetos y matrices, ¡remodelándolos en repositorios de Huex sobre la marcha!
sut.subSut = { a: 5 }; sut.on('change:subSut', (e) => { console.log(e.key);
Incluso hay más ejemplos disponibles en las pruebas de proyectos.
¿Cuál es el truco?
Toda esta magia se implementa a través de
Proxy . Esta no es la solución más rápida y, en general, no recomiendan usar la clase Proxy en producción.
(actualización)Conclusión
Para dos ciclos de desarrollo (tardes), la comunidad JS tiene otro marco interesante.
Qué puede hacer Huex:
- Inicializado desde objeto \ array
- Guardar valores por asignación simple
- Dispara eventos cuando se cambia a sí mismo como un objeto o como una matriz
- En el camino, rehaga los objetos / matrices escritos en los repositorios de Huex
- Activa eventos al cambiar un campo de objeto o campo de matriz
- En el camino, genere almacenamientos vacíos al acceder a un campo inexistente (una característica controvertida, pero muy interesante)
Lo que Huex no sabe cómo:
- Sé rápido :-). Aunque, como señaló Drag13 , todavía hay avances hacia la velocidad de Proxy, por lo que de repente este enfoque se volverá popular.