taro使用zustand

代码示例

下面是一个在 Taro 项目中使用 [use::Zustand] 进行状态管理的简单示例：

import create from 'zustand'
import { useEffect } from 'react'
import { View, Button, Text } from '@tarojs/components'
 
// 创建一个 Zustand store
const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
}))
 
export default function Counter() {
  const { count, increase, decrease } = useStore()
 
  useEffect(() => {
    // 在这里可以监听状态变化或做其他副作用操作
    console.log('count changed:', count)
  }, [count])
 
  return (
    <View>
      <Text>当前计数：{count}</Text>
      <Button onClick={increase}>增加</Button>
      <Button onClick={decrease}>减少</Button>
    </View>
  )
}

注意事项

• 跨页面共享状态
  Zustand 的 store 是全局单例，因此可以方便地实现跨页面共享状态，无需通过 props 或 context 层层传递。

• 服务端渲染兼容性
  使用 Taro 构建小程序时一般不涉及服务端渲染，但如果在 React Web 项目中使用 Zustand，应注意初始化状态，避免因共享单例导致状态污染。

• 避免直接修改状态
  Zustand 的 set 方法内部会处理不可变更新，尽量不要直接修改 state 对象，应通过提供的 set 函数进行安全更新。

• 结合 Taro 生命周期使用
  在 Taro 页面或组件中，可以利用 useEffect 等 Hook 来监听和响应状态变化，实现更灵活的业务逻辑。