Form Hooks API

createEffectHook

描述

创建自定义钩子监听器

签名

interface createEffectHook {
  (
    type: string,
    callback?: (
      payload: any,
      form: Form,
      ...ctx: any[] // 用户注入的上下文
    ) => (...args: any[]) => void // 高阶回调用于处理监听器的封装，帮助用户实现参数定制能力
  )
}

用例

<script setup lang="ts">
import { createEffectHook, createForm } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const onCustomEvent = createEffectHook(
  'custom-event',
  (payload, form) => (listener) => {
    listener(payload, form)
  },
)

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    onCustomEvent((payload, form) => {
      setResponse(`${payload} Form: ${form.id}`)
    })
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.notify('custom-event', 'This is Custom Event')
      }"
    >
      Notify
    </ElButton>
  </ActionResponse>
</template>

查看源码

createEffectContext

描述

在 effects 函数中如果我们抽象了很多细粒度的 hooks，想要在 hooks 里读到顶层上下文数据就需要层层传递，这样明显是很低效的事情，所以 formily 提供了 createEffectContext 帮助用户快速获取上下文数据

签名

interface createEffectContext<T> {
  (defaultValue: T): {
    provide: (value: T) => void
    consume: () => T
  }
}

用例

<script setup lang="ts">
import { createEffectContext, createForm, onFormSubmit } from '@silver-formily/core'
import { ElButton } from 'element-plus'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const { provide, consume } = createEffectContext()

function useMyHook() {
  const setResponse = consume()
  onFormSubmit(() => {
    setResponse('上下文通讯成功')
  })
}

const response = ref('')
function setResponse(value: string) {
  response.value = value
}
const form = createForm({
  effects() {
    provide(setResponse)
    useMyHook()
  },
})
</script>

<template>
  <ActionResponse :response="response">
    <ElButton
      @click="() => {
        form.submit()
      }"
    >
      提交
    </ElButton>
  </ActionResponse>
</template>

查看源码

useEffectForm

描述

useEffectForm 其实是 EffectContext 的便利用法，因为大多数场景用户都会读取 Form 实例，所以就不需要手动定义一个 EffectFormContext

签名

interface useEffectForm {
  (): Form
}

用例

Response：通讯成功：lnj9aup1l4y

<script setup lang="ts">
import { createEffectContext, createForm, useEffectForm } from '@silver-formily/core'
import { ref } from 'vue'
import ActionResponse from '../shared/ActionResponse.vue'

const { provide, consume } = createEffectContext()

function useMyHook() {
  const form = useEffectForm()
  const setResponse = consume()
  setResponse(`通讯成功：${form.id}`)
}

const response = ref('')
function setResponse(value: string) {
  response.value = value
}

createForm({
  effects() {
    provide(setResponse)
    useMyHook()
  },
})
</script>

<template>
  <ActionResponse :response="response" />
</template>

查看源码

Form Hooks API ​

createEffectHook ​

描述 ​

签名 ​

用例 ​

createEffectContext ​

描述 ​

签名 ​

用例 ​

useEffectForm ​

描述 ​

签名 ​

用例 ​

Form Hooks API

createEffectHook

描述

签名

用例

createEffectContext

描述

签名

用例

useEffectForm

描述

签名

用例