Store Utilities

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";
  })
);

报告此页面问题