Gestión de estado
¿Qué es el estado?
En ofa.js, el estado se refiere al atributo data del propio componente o módulo de página. Este estado solo puede usarse en el componente actual para almacenar y gestionar los datos internos de dicho componente.
Cuando varios componentes o páginas necesitan compartir los mismos datos, el enfoque tradicional consiste en transmitirlos mediante eventos o pasar propiedades (props) de capa en capa, lo que en aplicaciones complejas dificulta el mantenimiento del código. Por lo tanto, se necesita una gestión del estado —definiendo un objeto de estado compartido que permita a múltiples componentes o módulos de página acceder y modificar estos datos, logrando así la compartición del estado.
Consejo: La gestión de estado es adecuada para escenarios que requieren compartir datos entre componentes y páginas, como información de usuario, carrito de compras, configuración de temas, configuración global, etc.
Generar objeto de estado
Para crear un objeto de estado reactivo mediante $.stanz({}). Este método recibe un objeto normal como datos iniciales y devuelve un proxy de estado reactivo.
Uso básico (estado global)
// Dirección de la página de inicio de la aplicación
export const home = "./list.html";
// Configuración de animación de transición de página
export const pageAnime = {
current: {
opacity: 1,
transform: "translate(0, 0)",
},
next: {
opacity: 0,
transform: "translate(30px, 0)",
},
previous: {
opacity: 0,
transform: "translate(-30px, 0)",
},
};
export const contacts = $.stanz({
list: [{
id: 10010,
name: "Pete",
info: "Cada día es un nuevo comienzo, el sol siempre brilla después de la tormenta.",
},{
id: 10020,
name: "Mike",
info: "La vida es como un océano, solo los fuertes de voluntad pueden llegar al otro lado.",
},{
id: 10030,
name: "John",
info: "El secreto del éxito es mantener tus sueños y nunca rendirte.",
}]
});
// await fetch("/list.api").then(e=>e.json()).then(list=>data.list = list)
Contactos
-
Nombre: {{$data.name}}
Características del objeto de estado
1. Actualización responsiva
$.stanz() crea un objeto de estado reactivo. Cuando los datos del estado cambian, todos los componentes que hacen referencia a esos datos se actualizan automáticamente.
const store = $.stanz({ count: 0 });
// En el componente
export default {
data: {
store: {},
},
proto: {
increment() {
store.count++; // Todos los componentes que hacen referencia a store.count se actualizarán automáticamente
},
},
attached() {
// Referencia directa a la propiedad del objeto de estado
this.store = store;
},
detached() {
this.store = {}; // Cuando el componente se destruye, limpia los datos de estado montados
},
};2. Respuesta profunda
El objeto de estado admite reactividad profunda; los cambios en objetos y arrays anidados también serán detectados.
const store = $.stanz({
user: {
name: "ZhangSan",
settings: {
theme: "dark",
},
},
list: [],
});
// Modificar propiedades anidadas también desencadena actualizaciones
store.user.name = "LiSi";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "Nueva tarea" });Mejores prácticas
1. Montar el estado durante la fase attached del componente
Se recomienda montar el estado compartido en el ciclo de vida attached del componente:
export default {
data: {
list: [],
},
attached() {
// Monta el estado compartido en los datos del componente
this.list = data.list;
},
detached() {
// Al destruir el componente, limpia los datos de estado montados para evitar fugas de memoria
this.list = [];
},
};2. Gestión razonable del ámbito del estado
El alcance del estado depende de la ubicación de definición y el método de exportación:
Estado exportado con export en archivos JS independientes: estado global, accesible y modificable desde toda la aplicación, se utiliza tras importarlo con import o load.
// user-store.js
export const userStore = $.stanz({ user: null, theme: "light" });Estado definido internamente en la página o módulo del componente: estado del módulo, utilizado únicamente dentro de ese módulo.
<template component>
...
<script>
const localStore = $.stanz({ total: 0 });
export default async () => {
return {
data: {
localStore: {}
},
attached() {
this.localStore = localStore;
},
detached() {
// Cuando el componente se destruye, limpiar los datos de estado montados
this.localStore = {};
}
};
};
</script>
</template>Gestión de estado dentro del módulo
{{$index}} -
{{val}} - {{cartStore.total}}
Notas importantes
-
Limpieza de estado: En el ciclo de vida
detacheddel componente, limpie oportunamente las referencias a los datos de estado para evitar fugas de memoria. -
Evitar dependencias circulares: No forme referencias circulares entre objetos de estado, ya que esto puede causar problemas en el sistema reactivo.
-
Estructuras de datos grandes: Para estructuras de datos grandes, considere usar propiedades computadas o gestión por fragmentos para evitar costes de rendimiento innecesarios.
-
Consistencia del estado: Preste atención a la consistencia del estado en operaciones asíncronas; puede usar transacciones o actualizaciones por lotes para garantizar la integridad de los datos.