Vue3组合式API中TypeScript DeepReadonly状态的处理方案咨询

你当前的实现遵循了状态管理的最佳实践——用readonly保护外部状态不被直接修改，但确实会遇到TypeScript类型兼容和第三方库适配的问题，不建议直接移除readonly保护，以下是几种实用的处理方案：

1. 分离内部可写类型与外部只读类型 #

在store内部维护可写的reactive状态，对外导出readonly视图的同时，明确区分可写类型和只读类型：

import { reactive, readonly } from 'vue';

// 定义原始可写状态类型
interface State {
  count: number;
  items: string[];
}

// 内部可修改的状态
const state = reactive<State>({
  count: 0,
  items: []
});

// 对外导出只读状态
export const storeState = readonly(state);
// 导出只读类型别名，方便外部使用
export type ReadonlyState = DeepReadonly<State>;

// 导出仅有的状态修改方法
export const increment = () => {
  state.count++;
};

export const addItem = (item: string) => {
  state.items.push(item);
};

适配第三方库的两种方式： #

• 创建副本传递：如果第三方库需要修改数据，创建状态的浅/深副本传递，避免影响原状态：

  // 浅拷贝适合扁平结构
  const mutableCopy = { ...storeState };
  thirdPartyFunction(mutableCopy);
  
  // 深拷贝适合嵌套结构
  const deepMutableCopy = JSON.parse(JSON.stringify(storeState));
  thirdPartyFunction(deepMutableCopy);
  

• 类型断言（谨慎使用）：如果确认第三方库只会读取数据不会修改，可通过类型断言转换：

  thirdPartyFunction(storeState as unknown as State);
  

2. 定义工具类型移除只读修饰符 #

创建一个递归的工具类型，用于移除DeepReadonly的类型约束，仅在类型层面转换：

// 递归移除所有层级的readonly修饰符
type Mutable<T> = {
  -readonly [P in keyof T]: T[P] extends object ? Mutable<T[P]> : T[P]
};

// 使用时转换类型
const mutableState = storeState as unknown as Mutable<ReadonlyState>;
thirdPartyFunction(mutableState);

注意：这种方式仅修改类型，运行时原状态仍是Vue的只读代理，若第三方库尝试修改会报错，仅适用于只读场景。

3. 按需导出状态切片的可写副本 #

如果第三方库只需要状态的某一部分，单独导出该部分的可写副本，避免整个状态的类型转换：

// 比如第三方库需要items数组
export const getItemsForThirdParty = () => [...storeState.items];

// 调用第三方库
thirdPartyFunction(getItemsForThirdParty());

为什么不能移除readonly？ #

直接移除readonly会打破状态集中管理的约束，任何组件或函数都能直接修改状态，调试时无法追踪变更来源，长期维护会导致状态混乱，难以排查问题。

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