Gestión de Estado
¿Qué es el estado?
En ofa.js, estado se refiere a la propiedad data propia del componente o módulo de página. Este estado solo se puede usar en el componente actual y sirve para almacenar y gestionar los datos internos de ese componente.
Cuando varios componentes o páginas necesitan compartir los mismos datos, la práctica tradicional consiste en pasarlos a través de eventos o mediante props capa por capa, lo cual en aplicaciones complejas hace que el código sea difícil de mantener. Por lo tanto, se necesita la gestión del estado—mediante la definición de un objeto de estado compartido, se permite que varios componentes o módulos de página accedan y modifiquen estos datos, logrando así la compartición del estado.
Consejo: La gestión del estado es adecuada para escenarios que requieren compartir datos entre componentes y páginas, como información del usuario, carrito de compras, configuración de temas, configuración global, etc.
Generar objeto de estado
Crea un objeto de estado reactivo mediante $.stanz({}). Este método recibe un objeto común como datos iniciales y devuelve un proxy de estado reactivo.
Uso básico
// Dirección de la página de inicio de la aplicación
export const home = "./list.html";
// Configuración de animación de cambio 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: "Peter",
info: "Cada día es un nuevo comienzo, el sol siempre sale después de la tormenta.",
},{
id: 10020,
name: "Mike",
info: "La vida es como un océano, solo los de voluntad fuerte pueden llegar a la otra orilla.",
},{
id: 10030,
name: "John",
info: "El secreto del éxito es persistir en tus sueños y nunca rendirse.",
}]
});
// await fetch("/list.api").then(e=>e.json()).then(list=>data.list = list)
Directorio de Contactos
-
Nombre: {{$data.name}}
Características del objeto de estado
1. Actualización responsiva
El objeto de estado creado por $.stanz() es reactivo. Cuando los datos del estado cambian, todos los componentes que hacen referencia a esos datos se actualizarán automáticamente.
const store = $.stanz({ count: 0 });
// 在组件中
export default {
data: {
store: {}
},
proto:{
increment() {
store.count++; // 所有引用了 store.count 的组件都会自动更新
}
},
attached() {
// 直接引用状态对象的属性
this.store = store;
},
detached(){
this.store = {}; // 组件销毁时，清空挂载的状态数据
}
};2. Reactividad profunda
Los objetos de estado admiten reactividad profunda; los cambios en objetos y arrays anidados también son escuchados.
const store = $.stanz({
user: {
name: "张三",
settings: {
theme: "dark"
}
},
list: []
});
// 修改嵌套属性也会触发更新
store.user.name = "李四";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "新任务" });Mejores prácticas
1. Montar estado en la etapa attached del componente
Se recomienda montar el estado compartido en el ciclo de vida attached del componente:
export default {
data: {
list: []
},
attached() {
// Montar el estado compartido en el data del componente
this.list = data.list;
},
detached() {
// Cuando el componente se destruye, vaciar los datos de estado montados para evitar fugas de memoria
this.list = [];
}
};2. Gestionar adecuadamente el ámbito del estado
- Estado global: adecuado para datos a los que toda la aplicación necesita acceder (como información del usuario, configuración global)
- Estado del módulo: adecuado para datos compartidos dentro de un módulo de funcionalidad específico
// Estado de llamada global
export const globalStore = $.stanz({ user: null, theme: "light" });
// Estado utilizado dentro del módulo
const cartStore = $.stanz({ total: 0 });Gestión del estado dentro del módulo
{{$index}} -
{{val}} - {{cartStore.total}}
Precauciones
-
Limpieza de estado: en el ciclo de vida
detacheddel componente, limpia de forma oportuna las referencias a los datos de estado para evitar pérdidas de memoria. -
Evita dependencias cíclicas: los objetos de estado no deben formar referencias cíclicas, ya que podrían causar problemas en el sistema reactivo.
-
Estructuras de datos grandes: para estructuras de datos grandes, considera usar propiedades computadas o gestión por fragmentos para evitar costes de rendimiento innecesarios.
-
Consistencia del estado: en operaciones asíncronas, presta atención a la consistencia del estado; puedes usar transacciones o actualizaciones por lotes para garantizar la integridad de los datos.