Silver Formily Core1.0.1

English

简体中文

English

简体中文

Appearance

Form Hooks API ​

createEffectHook ​

Description ​

Creates a custom hook listener.

Signature ​

ts
interface createEffectHook {
  (
    type: string,
    callback?: (
      payload: any,
      form: Form,
      ...ctx: any[] // user-injected context
    ) => (...args: any[]) => void // higher-order callback used to wrap listeners and help users customize parameters
  )
}

Usage ​

<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 ​

Description ​

Inside the effects function, if we abstract many fine-grained hooks and want to read top-level context data inside those hooks, passing data layer by layer is obviously inefficient. Formily provides createEffectContext to help users access context data quickly.

Signature ​

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

Usage ​

<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 ​

Description ​

useEffectForm is essentially a convenience wrapper around EffectContext. Since most scenarios involve reading the Form instance, there is no need to manually define an EffectFormContext.

Signature ​

ts
interface useEffectForm {
  (): Form
}

Usage ​

Response：通讯成功：rv8k05818te
<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>
查看源码