编辑数据的保存和使用

编辑数据保存

使用<cook-editor>编辑的数据会实时存在它的CookEditorState的pages中，这个对象的类型描述如下：

// pages =====> Array<IPage>
interface IPage {
    path: string,
    name: string,
    uid: string,
    component: IComponentConfig
}
interface IComponentConfig {
    uid: string,
    name: string,
    makerType: "component",
    makerName: string,
    makerPkg: string,
    props?: Record<string, string>,
    slots?: Record<string, IComponentConfig[]>,
    events?: Record<string, ILogicConfig[]>
}
interface ILogicConfig {
    uid: string,
    name: string,
    makerType: "logic",
    makerName: string,
    makerPkg: string,
    props?: Record<string, string>
}

我们可以通过JSON.stringify这个方法将pages转成字符串，存储到数据库中，等到使用的时候再通过接口取出来，使用JSON.parse转成对象。

编辑数据使用

在<cook-editor>中使用

在使用createEditorState创建编辑状态的时候，可以传入已经存在的一些编辑数据。

假设现在已经有了一些编辑数据

import { IPage } from "vue-cook"

const pages: IPage[] = [{
    "name": "新增页面",
    "uid": "8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5",
    "path": "/8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5",
    "component": {
        "uid": "807dd687-c54f-4223-837a-706f918c4205",
        "name": "主应用",
        "makerType": "component",
        "makerName": "主应用",
        "makerPkg": "vue-cook",
        "slots": {
            "default": [{
                "uid": "54376c75-f1db-4ef5-9f21-ac673de70cf9",
                "name": "表格",
                "makerType": "component",
                "makerName": "表格",
                "makerPkg": "test-pkg",
                "props": {
                    "fetch": "{\"uid\":\"571a0a02-0dbe-439b-8b5b-a448e3a183bd\",\"name\":\"fetch\",\"makerType\":\"logic\",\"makerName\":\"fetch\",\"makerPkg\":\"test-pkg\",\"props\":{\"maxAge\":\"24\",\"minAge\":\"20\"}}"
                }
            }]
        }
    }
}]

export default async function fetchPages(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(JSON.stringify(pages))
        }, 10)
    })
}

创建createEditorState

let cookEditorState = ref<ICookEditorState>();
fecthPages().then(pagesString => {
    const pages = JSON.parse(pagesString) as IPage[]
    cookEditorState.value = createCookEditorState({
        pages: pages,
        makerList: [
            TableMaker, // import TableMaker from "./TableMaker.ts"
            FetchMaker, // import FetchMaker from "./FetchMaker.ts"
            ...defaultMakerList
        ]
    })
})

在<cook-editor>中使用它

<template>
    <template v-if="cookEditorState">
        <cook-editor :state="cookEditorState" :preview="preview"></cook-editor>
    </template>
</template>

打开示例页面-在<cook-editor>使用编辑数据，可以看到左侧面板中已经有了一个新建页面，执行一下步骤

• 点击已经存在的新建页面，可以看到页面编辑器中出现了一个带表格的页面
• 取消选中模式，点击表格上面的按钮
• 点击按钮，可以看到表格数据正常加载

在<cook-player>中使用

在使用createPlayerState创建状态的时候，可以传入已经存在的页面数据。

假设存在有一个页面

import { IPage } from "vue-cook"

const pages: IPage = {
    "name": "新增页面",
    "uid": "8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5",
    "path": "/8630b4fc-7e22-4bc8-993a-0c1d36e1c2a5",
    "component": {
        "uid": "807dd687-c54f-4223-837a-706f918c4205",
        "name": "主应用",
        "makerType": "component",
        "makerName": "主应用",
        "makerPkg": "vue-cook",
        "slots": {
            "default": [{
                "uid": "54376c75-f1db-4ef5-9f21-ac673de70cf9",
                "name": "表格",
                "makerType": "component",
                "makerName": "表格",
                "makerPkg": "test-pkg",
                "props": {
                    "fetch": "{\"uid\":\"571a0a02-0dbe-439b-8b5b-a448e3a183bd\",\"name\":\"fetch\",\"makerType\":\"logic\",\"makerName\":\"fetch\",\"makerPkg\":\"test-pkg\",\"props\":{\"maxAge\":\"24\",\"minAge\":\"20\"}}"
                }
            }]
        }
    }
}

export default async function fetchPage(): Promise<string> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(JSON.stringify(pages))
        }, 10)
    })
}

创建createPlayerState

let cookPlayerState = ref<ICookPlayerState>();
fecthPage().then(pageString => {
    const page = JSON.parse(pageString) as IPage
    cookPlayerState.value = createCookPlayerState({
        page: page,
        makerList: [
            TableMaker, // import TableMaker from "./TableMaker.ts"
            FetchMaker, // import FetchMaker from "./FetchMaker.ts"
            ...defaultMakerList
        ]
    })
})

在<cook-player>中使用它

<template>
    <template v-if="cookPlayerState">
        <cook-player :state="cookPlayerState"></cook-player>
    </template>
</template>

打开示例页面-在<cook-player>使用编辑数据，可以看到一个带表格的页面显示了出来，点击按钮，可以看到表格数据正常加载。

结合动态路由使用<cook-player>

可以使用vue-router的动态路由，动态添加<cook-player>

    let redirectTag = false;
    router.beforeEach(async (to, from) => {
        if (!redirectTag) {
            const pagesString = await fetchPages()
            const pages = JSON.parse(pagesString) as IPage[]
            pages.forEach(page => {
                const cookPlayerState = createCookPlayerState({
                    page,
                    makerList: [
                        ...defaultMakerList,
                        TableMaker, // import TableMaker from "./TableMaker.ts"
                        FetchMaker, // import FetchMaker from "./FetchMaker.ts"
                    ]
                })
                router.addRoute({
                    path: page.path,
                    component: CookPlayer,
                    props: {
                        state: cookPlayerState
                    }
                })
            })
            redirectTag = true
            return to.fullPath
        }
        redirectTag = false
    })

打开示例页面-结合动态路由使用<cook-player>，可以看到一个带表格的页面显示了出来，点击按钮，可以看到表格数据正常加载。