如何在Zustand中按角色名创建并复用多版本实例化商店？

核心实现方案 #

通过工厂函数+缓存机制，为每个传入的角色名生成唯一的独立store实例，无需手动逐个创建。

1. 定义带参数的Store工厂与缓存 #

import { create } from 'zustand'

// 缓存已创建的角色Store实例，避免重复初始化
const characterStoreCache = new Map()

// 角色Store模板，接收角色名作为参数
const buildCharacterStore = (characterName) => {
  return create((set) => ({
    // 角色专属状态
    characterName,
    hp: 100,
    level: 1,
    // 状态更新方法
    takeDamage: (amount) => set(state => ({ hp: Math.max(0, state.hp - amount) })),
    levelUp: () => set(state => ({ level: state.level + 1 }))
  }))
}

// 对外暴露的带参数Hook
export const useCharacterStore = (characterName) => {
  // 缓存中不存在则创建新实例
  if (!characterStoreCache.has(characterName)) {
    characterStoreCache.set(characterName, buildCharacterStore(characterName))
  }
  // 返回对应角色的Store状态与方法
  return characterStoreCache.get(characterName)()
}

2. 调用指定角色的Store实例 #

在组件中直接传入目标角色名，即可获取该角色的独立状态：

function CharacterPanel({ characterName }) {
  const { hp, level, takeDamage, levelUp } = useCharacterStore(characterName)

  return (
    <div className="character-card">
      <h2>{characterName}</h2>
      <p>当前生命值: {hp}</p>
      <p>当前等级: {level}</p>
      <button onClick={() => takeDamage(15)}>承受伤害</button>
      <button onClick={() => levelUp()}>提升等级</button>
    </div>
  )
}

// 组件使用示例
function GameInterface() {
  return (
    <div className="game-container">
      <CharacterPanel characterName="圣骑士" />
      <CharacterPanel characterName="火法师" />
      <CharacterPanel characterName="暗影刺客" />
    </div>
  )
}

可选：添加缓存清理机制 #

如果需要移除不再使用的角色Store，可补充清理函数：

export const disposeCharacterStore = (characterName) => {
  characterStoreCache.delete(characterName)
}

内容的提问来源于stack exchange，提问作者Momen