快速上手 | TanStack Store Docs

TanStack Store 首先是一个与框架无关的信号实现。

它可以与我们的任何框架适配器一起使用，但也可以在普通的 JavaScript 或 TypeScript 中使用。它目前用于为我们许多库的内部提供支持。

Store

你将从创建一个新的 store 实例开始，它是你数据的包装器：

typescript

import { Store } from '@tanstack/store';

const countStore = new Store(0);

console.log(countStore.state); // 0
countStore.setState(() => 1);
console.log(countStore.state); // 1

import { Store } from '@tanstack/store';

const countStore = new Store(0);

console.log(countStore.state); // 0
countStore.setState(() => 1);
console.log(countStore.state); // 1

然后可以使用此 Store 来跟踪数据的更新：

typescript

const unsub = countStore.subscribe(() => {
  console.log('计数现在是:', countStore.state);
});

// 之后，进行清理
unsub();

const unsub = countStore.subscribe(() => {
  console.log('计数现在是:', countStore.state);
});

// 之后，进行清理
unsub();

你甚至可以在数据更新之前对其进行转换：

typescript

const count = new Store(12, {
  updateFn: (prevValue) => (updateValue) => {
    return updateValue(prevValue) + previous;
  }
});

count.setState(() => 12);
// count.state === 24

const count = new Store(12, {
  updateFn: (prevValue) => (updateValue) => {
    return updateValue(prevValue) + previous;
  }
});

count.setState(() => 12);
// count.state === 24

并实现派生状态的原始形式：

typescript

let double = 0;
const count = new Store(0, {
  onUpdate: () => {
    double = count.state * 2;
  }
})

let double = 0;
const count = new Store(0, {
  onUpdate: () => {
    double = count.state * 2;
  }
})

批量更新

你可以使用 batch 函数批量更新 store：

typescript

import { batch } from '@tanstack/store';

// countStore.subscribers 只会在最后以最终状态触发一次
batch(() => {
  countStore.setState(() => 1);
  countStore.setState(() => 2);
});

import { batch } from '@tanstack/store';

// countStore.subscribers 只会在最后以最终状态触发一次
batch(() => {
  countStore.setState(() => 1);
  countStore.setState(() => 2);
});

Derived

你还可以使用 Derived 类来创建派生值，这些值在其依赖项更改时会延迟更新：

typescript

const count = new Store(0);

const double = new Derived({
  fn: () => count.state * 2,
  // 必须显式列出依赖项
  deps: [count]
});

// 必须挂载派生值才能开始侦听更新
const unmount = double.mount();

// 之后，进行清理
unmount();

const count = new Store(0);

const double = new Derived({
  fn: () => count.state * 2,
  // 必须显式列出依赖项
  deps: [count]
});

// 必须挂载派生值才能开始侦听更新
const unmount = double.mount();

// 之后，进行清理
unmount();

先前的派生值

你可以通过使用传递给 fn 函数的 prevVal 参数来访问派生计算的先前值：

typescript

const count = new Store(1);

const double = new Derived({
  fn: ({ prevVal }) => {
    return count.state + (prevVal ?? 0);
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

const count = new Store(1);

const double = new Derived({
  fn: ({ prevVal }) => {
    return count.state + (prevVal ?? 0);
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

依赖值

你可以通过使用传递给 fn 函数的 prevDepVals 和 currDepVals 参数来访问派生计算的依赖项的值：

typescript

const count = new Store(1);

const double = new Derived({
  fn: ({ prevDepVals, currDepVals }) => {
    return (prevDepVals[0] ?? 0) + currDepVals[0];
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

const count = new Store(1);

const double = new Derived({
  fn: ({ prevDepVals, currDepVals }) => {
    return (prevDepVals[0] ?? 0) + currDepVals[0];
  },
  deps: [count]
});

double.mount();
double.state; // 1
count.setState(() => 2);
double.state; // 3

Effects

你还可以使用 Effect 类来管理跨多个 store 和派生值的副作用：

typescript

const effect = new Effect({
  fn: () => {
    console.log('计数现在是:', count.state);
  },
  // `Store` 或 `Derived` 的数组
  deps: [count],
  // effect 是否应立即运行，默认为 false
  eager: true
})

// 必须挂载 effect 才能开始侦听更新
const unmount = effect.mount();

// 之后，进行清理
unmount();

const effect = new Effect({
  fn: () => {
    console.log('计数现在是:', count.state);
  },
  // `Store` 或 `Derived` 的数组
  deps: [count],
  // effect 是否应立即运行，默认为 false
  eager: true
})

// 必须挂载 effect 才能开始侦听更新
const unmount = effect.mount();

// 之后，进行清理
unmount();