UI Hooks

// useReactive(reactive, params)
// @param {ReactiveInstance} reactive
// @param {Object} params
// @prop {string} params.id - 成员唯一标识
// @prop {string} [params.prop] - 成员属性名称
// @returns {Object} - 当指定 params.prop 时，返回成员该属性的设定值、当前值及错误信息构成的对象，
// 否则返回所有属性的设定值、当前值及错误信息构成的对象。返回数据结构详见 context#get() API 文档。

// @example - 在函数组件中订阅成员某属性状态变更
import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.React.hooks.useReactive
const useReactive = UI.React.hooks.useReactive
function MyComponent(props = {}) {
  const {reactive, memberId} = props
  const {
    value, error, // value 属性当前值及错误
    raw: {value: rawValue, error: rawError} // value 属性设定值及错误
  } = useReactive(reactive, {id: memberId, prop: 'value'})
}

// @example - 在函数组件中订阅成员所有属性状态变更
import React from 'react'
import { UI } from 'rcfm/react'
// @namespace UI.React.hooks.useReactive
const useReactive = UI.React.hooks.useReactive
function MyComponent(props = {}) {
  const {reactive, memberId} = props
  const {
    values, errors, // 所有属性当前值及错误
    raw: {values: rawValues, errors: rawErrors} // 所有属性设定值及错误
  } = useReactive(reactive, {id: memberId})
}

// useReactive(reactive, params)
// @param {ReactiveInstance} reactive
// @param {Object} params
// @prop {string} params.id - 成员唯一标识
// @prop {string} [params.prop] - 成员属性名称
// @returns {VueShallowRef} - 返回的 shallowRef 的 value 值按情况分为：
// 当指定 params.prop 时，是成员该属性的设定值、当前值及错误信息构成的对象，
// 否则是所有属性的设定值、当前值及错误信息构成的对象。返回数据结构详见 context#get() API 文档。

// @example - 在 SFC 中订阅成员某属性状态变更
<script setup>
  import { computed } from 'vue'
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive', 'memberId'])
  // @namespace UI.Vue.composables.useReactive
  const useReactive = UI.Vue.composables.useReactive
  const state = useReactive(props.reactive, {
    id: props.memberId, prop: 'value'
  })
  // value 属性当前值及错误
  const value = computed(() => state.value.value)
  const error = computed(() => state.value.error)
  // value 属性设定值及错误
  const rawValue = computed(() => state.value.raw.value)
  const rawError = computed(() => state.value.raw.error)
</script>

// @example - 在 SFC 中订阅成员所有属性状态变更
<script setup>
  import { computed } from 'vue'
  import { UI } from 'rcfm/vue'
  const props = defineProps(['reactive', 'memberId'])
  // @namespace UI.Vue.composables.useReactive
  const useReactive = UI.Vue.composables.useReactive
  const state = useReactive(props.reactive, {id: props.memberId})
  // 所有属性当前值及错误
  const values = computed(() => state.value.values)
  const errors = computed(() => state.value.errors)
  // 所有属性设定值及错误
  const rawValues = computed(() => state.value.raw.values)
  const rawErrors = computed(() => state.value.raw.errors)
</script>