zustand状态管理工具(react)

分别创建文件continue.js、shoes.js

1、continue.js

javascript 复制代码
import create from 'zustand'
import { persist } from 'zustand/middleware'


export default create(
  persist(
    (set) => ({
      counter: 12,
      incrementer: () => set((state) => ({ counter: state.counter + 1 })),
      decrementer: () => set((state) => ({ counter: state.counter - 1 }))
    }),
    {
      name: 'myStore' // 持久化状态的标识符,用于存储在 localStorage 或其他存储中
    }
  )
)

2、shoes.js

javascript 复制代码
import create from 'zustand'

const useStore1 = create((set) => ({
  count: 12,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 }))
}))

export default useStore1

项目中使用

javascript 复制代码
import React from 'react'
import useStore1 from '@/zustandStore/shoes.js'
import useStore2 from '@/zustandStore/continue.js'
import styles from './index.module.scss'


export default function index() {
  const { count, increment, decrement } = useStore1()
  const { counter, incrementer, decrementer } = useStore2()


  return (
    <div className={styles.tableBox}>
      <div>
        普通的值:{count}
        <button onClick={() => increment()}>新增</button>
      </div>
      <div>
        长保存的值(localStorage):{counter}
        <button onClick={() => incrementer()}>新增</button>
      </div>
    </div>
  )
}
相关推荐
虫虫rankourin8 分钟前
在 create-react-app (CRA) 创建的应用中使用 react-router-dom v7以及懒加载的使用方法
前端·react.js
小刘鸭地下城10 分钟前
Web安全必备:关键 HTTP 标头解析
前端
yddddddy12 分钟前
html基本知识
前端·html
不要再敲了29 分钟前
JavaScript与jQuery:从入门到面试的完整指南
javascript·面试·jquery
开心不就得了1 小时前
React 状态管理
react.js·typescript
荣达1 小时前
koa洋葱模型理解
前端·后端·node.js
reembarkation1 小时前
使用pdfjs-dist 预览pdf,并添加文本层的实现
前端·javascript·pdf
reembarkation1 小时前
vue-pdf 实现blob数据的预览
javascript·vue.js·pdf
李明卫杭州2 小时前
JavaScript中的dispatchEvent方法详解
javascript
KenXu2 小时前
F2C-PTD工具将需求快速转换为代码实践
前端