State Management
What is state
In ofa.js, state refers to the data property of a component or page module itself. This state can only be used within the current component to store and manage its internal data.
When multiple components or pages need to share the same data, the traditional approach is to pass it through events or props layer by layer, which makes the code hard to maintain in complex applications. Therefore, state management is needed—by defining a shared state object, multiple components or page modules can access and modify this data, achieving state sharing.
Tip: State management is suitable for scenarios where data needs to be shared across components and pages, such as user information, shopping carts, theme configurations, global configurations, etc.
Generate State Object
Create a reactive state object via $.stanz({}). This method takes a plain object as initial data and returns a reactive state proxy.
Basic Usage
// App homepage address
export const home = "./list.html";
// Page transition animation config
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: "Every day is a new beginning, sunshine always comes after the storm.",
},{
id: 10020,
name: "Mike",
info: "Life is like an ocean, only those with a strong will can reach the other shore.",
},{
id: 10030,
name: "John",
info: "The secret to success is sticking to your dreams and never giving up.",
}]
});
// await fetch("/list.api").then(e=>e.json()).then(list=>data.list = list)
Contacts
-
Name: {{$data.name}}
Characteristics of State Objects
1. Responsive Updates
The state object created by $.stanz() is reactive. When the state data changes, all components referencing that data will automatically update.
const store = $.stanz({ count: 0 });
// in component
export default {
data: {
store: {}
},
proto: {
increment() {
store.count++; // all components referencing store.count update automatically
}
},
attached() {
// directly reference properties of the state object
this.store = store;
},
detached() {
this.store = {}; // clear mounted state data when component is destroyed
}
};2. Deep Reactivity
The state object supports deep reactivity, and changes to nested objects and arrays will also be observed.
const store = $.stanz({
user: {
name: "Zhang San",
settings: {
theme: "dark"
}
},
list: []
});
// Modifying nested properties also triggers updates
store.user.name = "Li Si";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "New Task" });Best Practices
1. Mount state during the component's attached phase
It is recommended to mount shared state in the attached lifecycle of a component:
export default {
data: {
list: []
},
attached() {
// Mount shared state to component's data
this.list = data.list;
},
detached() {
// When component is destroyed, clear mounted state data to prevent memory leaks
this.list = [];
}
};2. Properly Manage State Scope
- Global State: Suitable for data that needs to be accessed throughout the entire application (such as user information, global configurations)
- Module State: Suitable for data shared within specific functional modules
// Global call state
export const globalStore = $.stanz({ user: null, theme: "light" });
// Module-internal state
const cartStore = $.stanz({ total: 0 });In-Module State Management
{{$index}} -
{{val}} - {{cartStore.total}}
Notes
-
State Cleanup: In the
detachedlifecycle of a component, promptly clean up references to state data to avoid memory leaks. -
Avoid Circular Dependencies: Do not create circular references between state objects, as this may cause issues in the reactive system.
-
Large Data Structures: For large data structures, consider using computed properties or sharding management to avoid unnecessary performance overhead.
-
State Consistency: Pay attention to state consistency during asynchronous operations. Transactions or batch updates can be used to ensure data integrity.