zustand基础使用

# 安装

npm install zustand 
# or 

yarn add zustand

1
2
3
4

# 使用

在store/index中，

import {create} from 'zustand'

const useStore = create(()=>{
    // 存储全局共享的数据或方法
    return{
        bears:0
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10

在组件内

export const Father = ()=>{
    // 调用useStore,同时提供一个选择数据的选择器
    // state => 要访问的数据
    const bears = useStore((state)=>state.bears)
    
    return(
        <Text>{bears}</Text>
    )
}

1
2
3
4
5
6
7
8
9

# 添加类型提示

import {create} from 'zustand'

type BearType = {
    besrs:number;
}

const useStore = create<BearType>() (()=>{
    // 存储全局共享的数据或方法
    return{
        bears:0
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 修改Bears数量

在store/index

import {create} from 'zustand'

type BearType = {
    besrs:number;
    incrementBears:()=>void;
}

const useStore = create<BearType>()((set)=>{
    // 存储全局共享的数据或方法
    return{
        bears:0,
        incrementBears:()=>set((preState)=>({bears:preState.bears + 1}))
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在组件内

export const Father = ()=>{
    // 调用useStore,同时提供一个选择数据的选择器
    // state => 要访问的数据
    const bears = useStore((state)=>state.bears)
    const incrementBears = useStore((state)=>state.incrementBears)
    
    return(
        <Text>{bears}</Text>
        <Button onClick={incrementBears}>incrementBears</Button>
    )
}

1
2
3
4
5
6
7
8
9
10
11

# 重置Bears的数量

在store/index

import {create} from 'zustand'

type BearType = {
    besrs:number;
    incrementBears:()=>void;
    resetBears:()=>void;
}

const useStore = create<BearType>()((set)=>{
    // 存储全局共享的数据或方法
    return{
        bears:0,
        incrementBears:()=>set((preState)=>({bears:preState.bears + 1}))
        resetBears:()=>set(()=>({bears: 0}))
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在组件内

export const Father = ()=>{
    // 调用useStore,同时提供一个选择数据的选择器
    // state => 要访问的数据
    const bears = useStore((state)=>state.bears)
    const incrementBears = useStore((state)=>state.incrementBears)
    const resetBears = useStore((state)=>state.resetBears)
    
    return(
        <Text>{bears}</Text>
        <Button onClick={incrementBears}>incrementBears</Button>
        <Button onClick={resetBears}>resetBears</Button>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 根据step改变Bears的值

在store/index

import {create} from 'zustand'

type BearType = {
    besrs:number;
    incrementBears:()=>void;
    resetBears:()=>void;
    decrementBearsByStep:(step?:number)=>void;
}

const useStore = create<BearType>()((set)=>{
    // 存储全局共享的数据或方法
    return{
        bears:0,
        incrementBears:()=>set((preState)=>({bears:preState.bears + 1})),
        resetBears:()=>set(()=>({bears: 0})),
        decrementBearsByStep:(step = 1) => set((state)=>({bears:(state.bears - step)}))
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在组件内

export const Father = ()=>{
    // 调用useStore,同时提供一个选择数据的选择器
    // state => 要访问的数据
    const bears = useStore((state)=>state.bears)
    const incrementBears = useStore((state)=>state.incrementBears)
    const resetBears = useStore((state)=>state.resetBears)
    const decrementBearsByStep = useStore((state)=>state.decrementBearsByStep)
    
    return(
        <Text>{bears}</Text>
        <Button onClick={incrementBears}>incrementBears</Button>
        <Button onClick={resetBears}>resetBears</Button>
        <Button onClick={()=>decrementBearsByStep(5)}>decrementBearsByStep</Button>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 异步修改bears的数量

在store/index

import {create} from 'zustand'

type BearType = {
    besrs:number;
    incrementBears:()=>void;
    resetBears:()=>void;
    decrementBearsByStep:(step?:number)=>void;
    asyncIncrementBears:()=>void;
}

const useStore = create<BearType>()((set,get)=>{
    // 存储全局共享的数据或方法
    return{
        bears:0,
        incrementBears:()=>set((preState)=>({bears:preState.bears + 1})),
        resetBears:()=>set(()=>({bears: 0})),
        decrementBearsByStep:(step = 1) => set((state)=>({bears:(state.bears - step)})),
        asyncIncrementBears:()=>{
            setTimeout(()=>{
                // get()可以获取store对象，并访问store的数据和方法
                get().incrementBears()
            },1000)
        }
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

在组件内

export const Father = ()=>{
    // 调用useStore,同时提供一个选择数据的选择器
    // state => 要访问的数据
    const bears = useStore((state)=>state.bears)
    const incrementBears = useStore((state)=>state.incrementBears)
    const resetBears = useStore((state)=>state.resetBears)
    const decrementBearsByStep = useStore((state)=>state.decrementBearsByStep)
    const asyncIncrementBears = useStore((state)=>state.asyncIncrementBears)
    
    return(
        <Text>{bears}</Text>
        <Button onClick={incrementBears}>incrementBears</Button>
        <Button onClick={resetBears}>resetBears</Button>
        <Button onClick={()=>decrementBearsByStep(5)}>decrementBearsByStep</Button>
        <Button onClick={asyncIncrementBears}>asyncIncrementBears</Button>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 添加fishes相关的共享数据

在store/index

import {create} from 'zustand'

type BearType = {
    besrs:number;
    incrementBears:()=>void;
    resetBears:()=>void;
    decrementBearsByStep:(step?:number)=>void;
    asyncIncrementBears:()=>void;
    // fishes相关
    fishes:number;
    incrementFishes:()=>void;
    resetFishes:()=>void;
}

const useStore = create<BearType>()((set,get)=>{
    // 存储全局共享的数据或方法
    return{
        bears:0,
        incrementBears:()=>set((preState)=>({bears:preState.bears + 1})),
        resetBears:()=>set(()=>({bears: 0})),
        decrementBearsByStep:(step = 1) => set((state)=>({bears:(state.bears - step)})),
        asyncIncrementBears:()=>{
            setTimeout(()=>{
                // get()可以获取store对象，并访问store的数据和方法
                get().incrementBears()
            },1000)
        },
		fishes:0,
        incrementFishes:()=>set((preState)=>({bears:preState.fishes + 1})),
		resetFishes:()=>set(()=>({fishes: 0})),
    }
})

export default useStore

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在组件内

export const Fishes = ()=>{
    // 调用useStore,同时提供一个选择数据的选择器
    // state => 要访问的数据
    const fishes = useStore((state)=>state.fishes)
    const incrementFishes = useStore((state)=>state.incrementFishes)
    const resetFishes = useStore((state)=>state.resetFishes)
    
    return(
        <Text>{fishes}</Text>
        <Button onClick={incrementFishes}>incrementFishes</Button>
        <Button onClick={resetFishes}>resetFishes</Button>
    )
}

1
2
3
4
5
6
7
8
9
10
11
12
13

# 拆分store

Multi-Store
Single-Store

上次更新: 2024/08/14, 04:14:33

← Pinia API zustand 拆分Store→