Store Utilities

createStore

Store 被有意设计用来管理对象和数组等数据结构，但也能够处理字符串和数字等其他数据类型。

类型签名

import { createStore } from "solid-js/store"
import type { StoreNode, Store, SetStoreFunction } from "solid-js/store"

function createStore<T extends StoreNode>(
  state: T | Store<T>
): [get: Store<T>, set: SetStoreFunction<T>];

type Store<T> = T; // 概念上是只读的，但没有用类型表示

使用方法

import { createStore } from "solid-js/store";

// 初始化 store
const [store, setStore] = createStore({
  userCount: 3,
  users: [
    {
      id: 0,
      username: "felix909",
      location: "England",
      loggedIn: false,
    },
    {
      id: 1,
      username: "tracy634",
      location: "Canada",
      loggedIn: true,
    },
    {
      id: 1,
      username: "johny123",
      location: "India",
      loggedIn: true,
    },
  ],
});

Getter（获取器）

Store 对象支持使用 getter 来存储派生值。

const [state, setState] = createStore({
  user: {
    firstName: "John",
    lastName: "Smith",
    get fullName() {
      return `${this.firstName} ${this.lastName}`;
    },
  },
});

Setter（设置器）

更改可以是传递前一个状态并返回新状态的函数，也可以是一个值。对象总是进行浅合并。将值设置为 undefined 可以从 Store 中删除它们。在 TypeScript 中，你可以通过使用非空断言来删除值，比如 undefined!。

const [state, setState] = createStore({
  firstName: "John",
  lastName: "Miller",
});

setState({ firstName: "Johnny", middleName: "Lee" });
// ({ firstName: 'Johnny', middleName: 'Lee', lastName: 'Miller' })

setState((state) => ({ preferredName: state.firstName, lastName: "Milner" }));
// ({ firstName: 'Johnny', preferredName: 'Johnny', middleName: 'Lee', lastName: 'Milner' })

要了解更多关于使用 store 的信息，请查看 Stores 指南，以及 Store 工具 部分以获取更高级的 API。

报告此页面问题