自定义逻辑

可以通过defineLogicMaker这个工具函数自定义逻辑资源。

定义逻辑

可以将任何的函数变成自定义逻辑，假设，有一个获取数据的函数

// fetch.ts
interface IDataItem {
    name: string,
    age: number
}
export default async function fetch() {
    return new Promise((resolve, reject) => {
        const data: IDataItem[] = [
            { name: "张三", age: 20 },
            { name: "李四", age: 21 },
        ]
        setTimeout(() => {
            resolve(data)
        }, 1000)
    })
}

通过defineLogicMaker把它低代码化

// FetchMaker.ts
import { defineLogicMaker } from "vue-cook";
import fetch from "./fetch";
export default defineLogicMaker({
    name: "fetch",
    pkg: "test-pkg",
    make: () => {
        return fetch
    }
})

创建一个可以解析这个逻辑的组件

// Table.vue
<template>
    <div style="display: flex;flex-direction: column;width: 300px;">
        <button @click="fetchData">{{ fetch ? "点我获取数据" : "没有配置fetch属性" }}</button>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="n in data">
                <td>{{ n.name }}</td>
                <td>{{ n.age }}</td>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import { logicRun, ICookPlayerState, parseLogicConfig } from 'vue-cook';
import { inject, ref, toRefs } from 'vue';
const cookPlayerState = inject<ICookPlayerState>('cookPlayerState') as ICookPlayerState
const props = defineProps({
    fetch: String
})
const { fetch } = toRefs(props)
interface IDataItem {
    name: string,
    age: number
}
const data = ref<IDataItem[]>([])
const fetchData = async () => {
    data.value = []
    const logicConfig = parseLogicConfig(fetch?.value)
    if (logicConfig) {
        data.value = await logicRun<IDataItem[]>(cookPlayerState, logicConfig)
    }
}
</script>

打开示例页面-定义逻辑，可以在最下方的资源面板中找到新增加的获取数据逻辑，按照下面的步骤，使用它。

• 创建一个带Table组件的页面，选中Table
• 在组件编辑面板的属性一栏中，出现了一个名称为fetch的输入框，它的右边有一个图标，鼠标移上去，会提示拖拽逻辑到此处添加
• 从资源面板中拖入FetchMaker到上面的位置，可以看到输入框中自动填入了一个逻辑配置。
• 页面中的表格组件的按钮文字也变成点我获取数据
• 关闭选中模式，点击按钮，稍等片刻，可以看到数据加载成功

逻辑传参

假设现在有一个获取数据的函数，它提供两个maxAge和minAge参数，来控制返回人员数据的年龄范围

// fetch.ts
interface IDataItem {
    name: string,
    age: number
}
const data: IDataItem[] = [
    { name: "刘一", age: 18 },
    { name: "陈二", age: 19 },
    { name: "张三", age: 20 },
    { name: "李四", age: 21 },
    { name: "王五", age: 22 },
    { name: "赵六", age: 23 },
    { name: "孙七", age: 24 },
    { name: "周八", age: 25 },
    { name: "吴九", age: 26 },
    { name: "郑十", age: 27 },
]
export default async function fetch(maxAge: number = Infinity, minAge: number = 0) {
    return new Promise((resolve, reject) => {
        const _data = data.filter(e => {
            if (e.age > maxAge) {
                return false
            }
            if (e.age < minAge) {
                return false
            }
            return true
        })
        setTimeout(() => {
            resolve(_data)
        }, 1000)
    })
}

在Table.vue中对其传参

// Table.vue
<template>
    <div style="display: flex;flex-direction: column;width: 300px;">
        <button @click="fetchData">{{ fetch ? "点我获取数据" : "没有配置fetch属性" }}</button>
        <table>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="n in data">
                <td>{{ n.name }}</td>
                <td>{{ n.age }}</td>
            </tr>
        </table>
    </div>
</template>
<script setup lang="ts">
import { logicRun, ICookPlayerState, parseLogicConfig } from 'vue-cook';
import { inject, ref, toRefs } from 'vue';
const cookPlayerState = inject<ICookPlayerState>('cookPlayerState') as ICookPlayerState
const props = defineProps({
    fetch: String,
    maxAge: String,
    minAge: String
})
const { fetch, maxAge, minAge } = toRefs(props)
interface IDataItem {
    name: string,
    age: number
}
const data = ref<IDataItem[]>([])
const fetchData = async () => {
    data.value = []
    const logicConfig = parseLogicConfig(fetch?.value)
    if (logicConfig) {
        const maxAgeNumber = Number(maxAge?.value) || undefined
        const minAgeNumber = Number(minAge?.value) || undefined
        data.value = await logicRun<IDataItem[]>(cookPlayerState, logicConfig, maxAgeNumber, minAgeNumber)
    }
}
</script>

打开示例页面-逻辑传参，执行按照下面的步骤

• 创建一个带Table组件的页面，选中Table
• 在组件编辑面板的属性一栏中，可以看到它有三个属性配置项，fetch,maxAge,minAge
• 配置fetch,maxAge,minAge
• 关闭选中模式，点击按钮，稍等片刻，可以看到人员数据按照相应的年龄范围加载成功

添加属性配置

除了通过传参来控制自定义逻辑，还可以通过defineComponentMaker中的makePropOptions参数，为自定义的逻辑添加属性配置。

假设现在有一个获取数据的自定义逻辑，它提供两个maxAge和minAge属性，可以让用户配置返回人员数据的年龄范围

// FetchMaker.ts
import { defineLogicMaker } from "vue-cook";
import fetch from "./fetch";
export default defineLogicMaker({
    name: "fetch",
    pkg: "test-pkg",
    makePropOptions: () => ["maxAge", "minAge"],
    make: (cookPlayerState, logicConfig) => {
        const maxAgeNumber = Number(logicConfig?.props?.["maxAge"]) || undefined
        const minAgeNumber = Number(logicConfig?.props?.["minAge"]) || undefined
        return () => {
            return fetch(maxAgeNumber, minAgeNumber)
        }
    }
})

打开示例页面-为逻辑添加属性配置，执行按照下面的步骤

• 创建一个带Table组件的页面，选中Table
• 配置fetch项，鼠标移动到fetch输入框最右边的图标上，可以看到一个编辑弹框
• 滚动下，可以看到属性编辑栏有两个配置项maxAge和minAge，输入一些数字
• 关闭选中模式，点击按钮，稍等片刻，可以看到人员数据按照相应的年龄范围加载成功

事件绑定的逻辑添加属性配置

当自定义逻辑绑定到某一事件上后，它也可以添加一些属性配置，以AlertMaker为例，添加makePropOptions

// AlertMaker.ts
import { defineLogicMaker } from "vue-cook";
export default defineLogicMaker({
    name: "alert",
    pkg: "test-pkg",
    makePropOptions: () => ["msg"],
    make: (cookPlayerState, logicConfig) => {
        return () => {
            alert(`${logicConfig.props?.["msg"] || '你好，世界！'}`)
        }
    }
})

打开示例页面-事件绑定的逻辑添加属性配置，执行按照下面的步骤

• 创建一个带按钮的页面，选中按钮
• 为它的点击事件绑定AlertMaker
• 下方表格新增的那条数据右侧操作按钮中有一个编辑按钮，鼠标移上去，可以看到一个编辑弹框
• 滚动下，可以看到属性编辑栏有一个配置项msg，输入一些内容
• 关闭选中模式，点击按钮，可以看到输入的内容被显示出来

更多defineLogicMaker的参数，参考defineLogicMaker