State Management
What is State
In ofa.js, state refers to the data property of a component or page module. This state can only be used on the current component, and is used to store and manage the internal data of that component.
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, thus 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 cart, theme configuration, global configuration, etc.
Generating Status Object
Create a reactive state object by using $.stanz({}). This method accepts a plain object as initial data and returns a reactive state proxy.
Basic Usage (Global State)
// Application home page address
export const home = "./list.html";
// Page transition animation configuration
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, and the sun always shines after the storm.",
},{
id: 10020,
name: "Mike",
info: "Life is like the ocean; only those with strong will can reach the other shore.",
},{
id: 10030,
name: "John",
info: "The secret of success is to hold on to your dreams and never give up.",
}]
});
// await fetch("/list.api").then(e=>e.json()).then(list=>data.list = list)
Contacts
-
Name: {{$data.name}}
Characteristics of state objects
1. Reactive Update
$.stanz() creates a reactive state object. When the state data changes, all components that reference the data will automatically update.
const store = $.stanz({ count: 0 });
// In the component
export default {
data: {
store: {},
},
proto: {
increment() {
store.count++; // All components that reference store.count will automatically update
},
},
attached() {
// Directly reference the property of the state object
this.store = store;
},
detached() {
this.store = {}; // When the component is destroyed, clear the mounted state data
},
};2. Deep Responsive
The state object supports deep reactivity; changes to nested objects and arrays will also be monitored.
const store = $.stanz({
user: {
name: "Zhang San",
settings: {
theme: "dark",
},
},
list: [],
});
// Modifying nested properties will also trigger updates
store.user.name = "Li Si";
store.user.settings.theme = "light";
store.list.push({ id: 1, title: "New Task" });Best Practices
1. Mounting state during the component's attached phase
It is recommended to mount the shared state in the component's attached lifecycle:
export default {
data: {
list: [],
},
attached() {
// Mount shared state onto the component's data
this.list = data.list;
},
detached() {
// When the component is destroyed, clear the mounted state data to prevent memory leaks
this.list = [];
},
};2. Reasonably Manage State Scope
The scope of state depends on the definition location and export method:
States exported via export in standalone JS files: Global states that can be accessed and modified throughout the entire application after being imported via import or load.
// user-store.js
export const userStore = $.stanz({ user: null, theme: "light" });State defined within a page or component module：Module state，used only within that module。
<template component>
...
<script>
const localStore = $.stanz({ total: 0 });
export default async () => {
return {
data: {
localStore: {}
},
attached() {
this.localStore = localStore;
},
detached() {
// When the component is destroyed, clear the mounted state data
this.localStore = {};
}
};
};
</script>
</template>Module-Level State Management
{{$index}} -
{{val}} - {{cartStore.total}}
Notes
-
State Cleanup: During the component's
detachedlifecycle, promptly clear references to state data to avoid memory leaks. -
Avoid Circular Dependencies: Do not form circular references between state objects, as this may cause issues with 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 in asynchronous operations, and use transactions or batch updates to ensure data integrity.