code deep_
创建时间: 2026-03-24最后更新: 2026-03-24

当我们想要触发更新时, 必须要调用 set | setState 方法. 该方法是基于现有整体状态的浅合并

例如下面这种写法, 最后将得到状态 {salmon, tuna, setSalmon }

set
setState
1
const useStore = create((set) => ({

2
  salmon: 1,

3
  tuna: 2,

4
  setSalmon: (newVal) => set(() => ({ salmon: newVal }))

5
}))

如果我们要单独针对某一个状态进行更改, 我们可以从 state 中获取当前值, 然后进行新值的运算并返回合并

store.ts
1
export const useStore = create()((set) => ({

2
  count1: 1,

3
  count2: 1,

4
  inc_count1: () => set((state) => ({ count1: state.count1 + 1 })),

5
  dec_count1: () => set((state) => ({ count1: state.count1 - 1 })),

6
  inc_count2: () => set((state) => ({ count2: state.count2 + 1 })),

7
  dec_count2: () => set((state) => ({ count2: state.count2 - 1 })),

8
}))

完整如下

预览
index.tsx
store.ts
count1.tsx
count2.tsx
01
import Count1 from './count1'

02
import Count2 from './count2'

03


04
export default function Counter() {

05
  return (

06
    <div className='flex items-center justify-center p-4 gap-4'>

07
      <Count1 />

08
      <Count2 />

09
    </div>

10
  )

11
}

1、本质上是不可变数据的更新

set 方法的本质上是不可变数据的更新。

例如这个案例中

store.ts
1
import { create } from 'zustand'

2


3
const useCountStore = create((set) => ({

4
  count: 0,

5
  inc: () => set((state) => ({ count: state.count + 1 })),

6
}))

set 方法的完整形态是

store.ts
1
set((state) => ({ 

2
  ...state, 

3
  count: state.count + 1 

4
}))

但是,我们在使用时,会简写

store.ts
1
set((state) => ({ count: state.count + 1 }))

当然,你也可以传入一个布尔值,来禁用简写的合并模式,但是通常我们不会这样做。

store.ts
1
set((state) => ({ count: state.count + 1 }), false)