Blog
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)

HiuZing

🍑
首页
文档
收藏
关于
  • 在线转换时间戳 (opens new window)
  • 在线压缩图片 (opens new window)
  • Float-Double转二进制 (opens new window)
  • 文件转Hex字符串 (opens new window)
  • 前端面试题

  • JavaScript

  • Vue2

  • port

  • CSS

  • Node.js

  • JavaScript优化

  • uniapp

  • Mini Program

  • TypeScript

  • 面向对象编程

  • UI组件

  • Plugin

  • Vue3

  • 性能优化

  • Axios

  • 状态管理

    • pinia

    • zustand

      • zustand基础使用
        • 安装
        • 使用
        • 添加类型提示
        • 修改Bears数量
        • 重置Bears的数量
        • 根据step改变Bears的值
        • 异步修改bears的数量
        • 添加fishes相关的共享数据
        • 拆分store
      • zustand 拆分Store
  • React

  • Mock

  • Icon

  • Template

  • 构建工具

  • 项目规范配置

  • Taro

  • SVG

  • React Native

  • 前端
  • 状态管理
  • zustand
HiuZing
2024-04-27
目录

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

  1. Multi-Store
  2. Single-Store
上次更新: 2024/08/14, 04:14:33
Pinia API
zustand 拆分Store

← Pinia API zustand 拆分Store→

最近更新
01
React Native 使用SVG
08-13
02
Docker基础命令
08-04
03
算数逻辑单元
07-30
更多文章>
Theme by Vdoing | Copyright © 2021-2024 WeiXiaojing | 友情链接
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式