modifyMutable
编辑此页面modifyMutable
简化了对通过 createMutable
获得的可变 Store 进行多重修改的过程。
它在单个 batch
中运行,确保依赖计算只更新一次,而不是为每个单独的更改都触发更新。
import { modifyMutable } from "solid-js/store";
function modifyMutable<T>(mutable: T, modifier: (state: T) => T): void;
该函数接受两个参数:
- 第一个参数是需要修改的可变 Store。
- 第二个参数是 Store 修改器,可以是由
reconcile
返回的修改器之一。
caution:
当传入自定义的修改器函数时,需要注意其参数是 store 的未包装版本。
例如,如果 UI 依赖于一个可变数据的多个字段:
import { createMutable } from "solid-js/store";
const state = createMutable({ user: { firstName: "John", lastName: "Smith", },});
<h1>Hello {state.user.firstName + " " + state.user.lastName}</h1>;
按顺序修改 n 个字段会导致 UI 更新 n 次:
state.user.firstName = "Jane";state.user.lastName = "Doe";
要只触发一次更新,可以使用 batch
来修改字段:
import { batch } from "solid-js";
batch(() => { state.user.firstName = "Jane"; state.user.lastName = "Doe";});
modifyMutable
结合 reconcile
或 produce
提供了两种实现类似功能的替代方法:
import { modifyMutable, reconcile } from "solid-js/store";
// 用指定对象替换 state.user(删除任何其他字段)modifyMutable( state.user, reconcile({ firstName: "Jane", lastName: "Doe", }));
import { modifyMutable, produce } from "solid-js/store";
// 批量修改两个字段,只触发一次更新modifyMutable( state, produce((state) => { state.user.firstName = "Jane"; state.user.lastName = "Doe"; }));