Zustand技术问题：如何实现状态中派生属性随依赖属性自动更新？

当然可以，Zustand提供了两种常用的实现方式，根据你的需求选择即可：

方式一：使用派生状态（推荐，无冗余数据） #

不需要在store中存储property3，而是通过实时计算得到，这是React状态管理的推荐思路：

组件内直接计算 #

在使用的组件里直接基于property1和property2计算：

import useStore from './your-store';

function YourComponent() {
  const property1 = useStore(state => state.property1);
  const property2 = useStore(state => state.property2);
  const property3 = property1 * property2; // 自动跟随前两者更新

  return <div>{property3}</div>;
}

在store中封装派生逻辑 #

如果希望在多个组件中复用计算逻辑，可以在store里定义一个getter方法：

import { create } from 'zustand';

const useStore = create((set, get) => ({
  property1: 2,
  property2: 3,
  // 封装计算逻辑，每次调用时实时获取最新值计算
  getProperty3: () => get().property1 * get().property2,
  // 定义更新方法
  updateProperty1: (newVal) => set({ property1: newVal }),
  updateProperty2: (newVal) => set({ property2: newVal })
}));

组件中使用时：

const property3 = useStore(state => state.getProperty3());

方式二：同步更新状态（存储冗余数据） #

如果需要将property3作为状态存储（比如计算逻辑复杂，避免重复计算），可以在更新property1或property2时，同步计算并更新property3：

import { create } from 'zustand';

const useStore = create((set) => ({
  property1: 2,
  property2: 3,
  property3: 6,
  // 更新property1时同步计算property3
  updateProperty1: (newVal) => set(state => ({
    property1: newVal,
    property3: newVal * state.property2
  })),
  // 更新property2时同步计算property3
  updateProperty2: (newVal) => set(state => ({
    property2: newVal,
    property3: state.property1 * newVal
  }))
}));

之后只要通过updateProperty1或updateProperty2修改值，property3就会自动更新。

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