如何持久化数据

目前提供了一种新方式，可以参考对接自己的存储服务。

在线demo的数据是存储在电脑本地的，也就是localStorage里，当然，你也可以存储到数据库中。

保存数据

保存数据，一般有两种做法，一是让用户手动保存，二是当画布上的数据改变后自动保存，显然，第二中体验更好一点。

要获取画布的数据，可以使用getData方法，可以传递一个参数，true指定返回的数据中包含配置数据，false指定只返回节点树数据。

const data = mindMap.getData(true)

包含配置的完整数据结构：

{
    layout,
    root,
    theme: {
        template,
        config
    },
    view
}

你可以直接把获取到的数据保存起来即可。

如果要自动保存，那么肯定需要监听相关事件：

this.$bus.$on('data_change', data => {
    // 节点树数据改变
    // data即完整数据中的root部分
})
this.$bus.$on('view_data_change', data => {
    // 视图数据改变
    // data即完整数据中的view部分
})

主题和结构的改变一般是开发者提供一个ui界面让用户选择，所以可以自行触发保存。

回显数据

当从数据库获取到了保存的数据，那么怎么渲染到画布上呢，首先可以直接在new一个MindMap实例时直接传入：

// 从数据中取出各个部分
let { root, layout, theme, view } = storeData
let mindMap = new MindMap({
    el: container,
    data: root,
    layout: layout,
    theme: theme.template,
    themeConfig: theme.config,
    viewData: view,
    // ...
})

其次如果是包含配置的完整数据也可以调用setFullData方法：

mindMap.setFullData(data)

如果是纯节点数据可以调用setData方法：

mindMap.setData(data)

修改结构可以调用setLayout方法：

mindMap.setLayout(layout)

设置主题可以调用setTheme方法：

mindMap.setTheme(theme)

设置主题配置可以调用setThemeConfig方法：

mindMap.setThemeConfig(themeConfig)

设置视图数据可以调用view.setTransformData方法：

mindMap.view.setTransformData(view)

完整示例