zustand使用

本文主要是介绍zustand使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

安装

npm install zustand

对于简单的状态

（一层）

定义

E:\next-blog\zustandtest\store\index.ts

import { create } from 'zustand'interface State {count: number,todoList: string[]todoItem: stringname: string
}type Action = {increaseCount: () => voidsetTodoList: (item: string) => voidsetTodoItem: (item: string) => voidupdateName: (item: string) => void
}export const useStore = create<State & Action>()((set) => ({count: 0,todoList: [],todoItem: "",name: "",increaseCount: () => set((state) => ({ count: state.count + 1 })),setTodoList: (item) => set((state) => ({ todoList: [...state.todoList, item] })),setTodoItem: (item) => set(() => ({ todoItem: item })),updateName: (item) => set(() => ({ name: item }))}))

import { create } from 'zustand'interface State {switchPage: string
}type Action = {setswitchPage: (item: string) => void
}export const useStore = create<State & Action>()((set) => ({switchPage: "file",setswitchPage: (item) => set(() => ({ switchPage: item }))}))

调用

E:\next-blog\zustandtest\components\Todolists.tsx

"use client"
import { useStore } from '@/store'
import React from 'react'const Todolists = () => {const todolist = useStore((state) => state.todoList)const todoItem = useStore((state) => state.todoItem)const setTodoItem = useStore((state) => state.setTodoItem)const setTodoList = useStore((state) => state.setTodoList)

对于复杂的状态

需要用到中间件

npm install immer

（多层）

import { create } from 'zustand'
import { immer } from 'zustand/middleware/immer'interface ILog {where: string,who: string,done: string
}interface State {log: ILog
}type Action = {setLogName: (item: string) => voidsetLogWhere: (item: string) => voidsetLogDone: (item: string) => void
}export const useStore = create<State & Action>()(immer((set) => ({log: {who: '',where: '',done: ''},setLogName: (item) =>set((state) => {state.log.who = item}),// 对象状态setLogWhere: (item) =>set((state) => {state.log.where = item}),setLogDone: (item) =>set((state) => {state.log.done = item}),})))

updateName: (item) => set(() => ({ name : item })),
updateName: (item) => set((state) => { state.name = item }),  //immer包裹

偶尔分享web开发知识
某破站
blog

这篇关于zustand使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---