88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
import { reactive, onBeforeUnmount, type Reactive } from 'vue'
|
||
import type { IObservable } from '@/core/state/IObservable.ts'
|
||
|
||
/**
|
||
* Vue Hook: useObservable
|
||
* 支持深层解构赋值，直接修改触发 ObservableImpl 通知 + Vue 响应式更新
|
||
* @example
|
||
* interface AppState {
|
||
* count: number
|
||
* user: { name: string; age: number }
|
||
* items: number[]
|
||
* }
|
||
*
|
||
* // 创建 ObservableImpl
|
||
* const obs = new ObservableImpl<AppState>({
|
||
* count: 0,
|
||
* user: { name: 'Alice', age: 20 },
|
||
* items: []
|
||
* })
|
||
*
|
||
* export default defineComponent({
|
||
* setup() {
|
||
* // 深层解构 Hook
|
||
* const { count, user, items } = useObservable(obs)
|
||
*
|
||
* const increment = () => {
|
||
* count += 1 // 触发 ObservableImpl 通知 + Vue 更新
|
||
* }
|
||
*
|
||
* const changeAge = () => {
|
||
* user.age = 30 // 深层对象也能触发通知
|
||
* }
|
||
*
|
||
* const addItem = () => {
|
||
* items.push(42) // 数组方法拦截，触发通知
|
||
* }
|
||
*
|
||
* return { count, user, items, increment, changeAge, addItem }
|
||
* }
|
||
* })
|
||
*/
|
||
export function useObservable<T extends object>(observable: IObservable<T>): Reactive<T> {
|
||
// 创建 Vue 响应式对象
|
||
const state = reactive({} as T)
|
||
|
||
/**
|
||
* 将 ObservableImpl Proxy 映射到 Vue 响应式对象
|
||
* 递归支持深层对象
|
||
*/
|
||
function mapKeys(obj: any, proxy: any) {
|
||
(Object.keys(proxy) as (keyof typeof proxy)[]).forEach(key => {
|
||
const value = proxy[key]
|
||
if (typeof value === 'object' && value !== null) {
|
||
// 递归创建子对象 Proxy
|
||
obj[key] = reactive({} as typeof value)
|
||
mapKeys(obj[key], value)
|
||
} else {
|
||
// 基本类型通过 getter/setter 同步
|
||
Object.defineProperty(obj, key, {
|
||
enumerable: true,
|
||
configurable: true,
|
||
get() {
|
||
return proxy[key]
|
||
},
|
||
set(val) {
|
||
proxy[key] = val
|
||
},
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
// 获取 ObservableImpl 的 Proxy
|
||
const refsProxy = observable.toRefsProxy()
|
||
mapKeys(state, refsProxy)
|
||
|
||
// 订阅 ObservableImpl，保持响应式同步
|
||
const unsubscribe = observable.subscribe(() => {
|
||
// 空实现即可，getter/setter 已同步
|
||
})
|
||
|
||
onBeforeUnmount(() => {
|
||
unsubscribe()
|
||
})
|
||
|
||
return state
|
||
}
|