zustand 的属性怎么配合类一起使用

最新推荐文章于 2025-12-11 16:05:35 发布

原创最新推荐文章于 2025-12-11 16:05:35 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

在 Zustand 中，通常建议将状态存储为简单的 JavaScript 对象，而不是类的实例。这是因为 Zustand 是基于 React 的上下文和 Hooks API 设计的，它最适合处理简单的、可序列化的状态。然而，如果确实需要将类的实例与 Zustand 结合使用，可以只存储类的关键属性，并在需要时创建一个新的类实例。

import create from 'zustand';  
  
class Person {  
  constructor(name, age) {  
    this.name = name;  
    this.age = age;  
  }  
  
  greet() {  
    return `Hello, my name is ${this.name} and I'm ${this.age} years old.`;  
  }  
}  
  
const useStore = create((set, get) => ({  
  name: 'John Doe',  
  age: 30,  
  setName: (name) => set({ name }),  
  setAge: (age) => set({ age }),  
  getPerson: () => new Person(get().name, get().age),  
}));  
  
function MyComponent() {  
  const { setName, setAge, getPerson } = useStore();  
  
  const handleNameChange = (event) => {  
    setName(event.target.value);  
  };  
  
  const handleAgeChange = (event) => {  
    setAge(parseInt(event.target.value, 10));  
  };  
  
  const person = getPerson();  
  
  return (  
    <div>  
      <p>{person.greet()}</p>  
      <input type="text" value={person.name} onChange={handleNameChange} placeholder="Enter name" />  
      <input type="number" value={person.age} onChange={handleAgeChange} placeholder="Enter age" />  
    </div>  
  );  
}