mind-map/dist/js/chunk-2d0e4e1f.js

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e4e1f"],{"91b3":function(s,a,t){"use strict";t.r(a);var e=function(){var s=this;s._self._c;return s._m(0)},n=[function(){var s=this,a=s._self._c;return a("div",[a("h1",[s._v("如何持久化数据")]),a("blockquote",[a("p",[s._v("目前提供了一种新方式，可以参考"),a("a",{attrs:{href:"https://wanglin2.github.io/mind-map/#/doc/zh/deploy/%E5%AF%B9%E6%8E%A5%E8%87%AA%E5%B7%B1%E7%9A%84%E5%AD%98%E5%82%A8%E6%9C%8D%E5%8A%A1"}},[s._v("对接自己的存储服务")]),s._v("。")])]),a("p",[s._v("在线"),a("code",[s._v("demo")]),s._v("的数据是存储在电脑本地的，也就是"),a("code",[s._v("localStorage")]),s._v("里，当然，你也可以存储到数据库中。")]),a("h2",[s._v("保存数据")]),a("p",[s._v("保存数据，一般有两种做法，一是让用户手动保存，二是当画布上的数据改变后自动保存，显然，第二中体验更好一点。")]),a("p",[s._v("要获取画布的数据，可以使用"),a("code",[s._v("getData")]),s._v("方法，可以传递一个参数，"),a("code",[s._v("true")]),s._v("指定返回的数据中包含配置数据，"),a("code",[s._v("false")]),s._v("指定只返回节点树数据。")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = mindMap.getData("),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(")\n")])]),a("p",[s._v("包含配置的完整数据结构：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("{\n    layout,\n    root,\n    "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": {\n        template,\n        config\n    },\n    view\n}\n")])]),a("p",[s._v("你可以直接把获取到的数据保存起来即可。")]),a("p",[s._v("如果要自动保存，那么肯定需要监听相关事件：")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".$bus.$on("),a("span",{staticClass:"hljs-string"},[s._v("'data_change'")]),s._v(", "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("data")]),s._v(" =>")]),s._v(" {\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// 节点树数据改变")]),s._v("\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// data即完整数据中的root部分")]),s._v("\n})\n"),a("span",{staticClass:"hljs-built_in"},[s._v("this")]),s._v(".$bus.$on("),a("span",{staticClass:"hljs-string"},[s._v("'view_data_change'")]),s._v(", "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("data")]),s._v(" =>")]),s._v(" {\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// 视图数据改变")]),s._v("\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// data即完整数据中的view部分")]),s._v("\n})\n")])]),a("p",[s._v("主题和结构的改变一般是开发者提供一个ui界面让用户选择，所以可以自行触发保存。")]),a("h2",[s._v("回显数据")]),a("p",[s._v("当从数据库获取到了保存的数据，那么怎么渲染到画布上呢，首先可以直接在"),a("code",[s._v("new")]),s._v("一个"),a("code",[s._v("MindMap")]),s._v("实例时直接传入：")]),a("pre",{staticClass:"hljs"},[a("code",[a("span",{staticClass:"hljs-comment"},[s._v("// 从数据中取出各个部分")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" { root, layout, theme, view } = storeData\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" mindMap = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n    "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": container,\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": root,\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v(": layout,\n    "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": theme.template,\n    "),a("span",{staticClass:"hljs-attr"},[s._v("themeConfig")]),s._v(": theme.config,\n    "),a("span",{staticClass:"hljs-attr"},[s._v("viewData")]),s._v(": view,\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n})\n")])]),a("p",[s._v("其次如果是包含配置的完整数据也可以调用"),a("code",[s._v("setFullData")]),s._v("方法：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setFullData(data)\n")])]),a("p",[s._v("如果是纯节点数据可以调用"),a("code",[s._v("setData")]),s._v("方法：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setData(data)\n")])]),a("p",[s._v("修改结构可以调用"),a("code",[s._v("setLayout")]),s._v("方法：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setLayout(layout)\n")])]),a("p",[s._v("设置主题可以调用"),a("code",[s._v("setTheme")]),s._v("方法：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setTheme(theme)\n")])]),a("p",[s._v("设置主题配置可以调用"),a("code",[s._v("setThemeConfig")]),s._v("方法：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.setThemeConfig(themeConfig)\n")])]),a("p",[s._v("设置视图数据可以调用"),a("code",[s._v("view.setTransformData")]),s._v("方法：")]),a("pre",{staticClass:"hljs"},[a("code",[s._v("mindMap.view.setTransformData(view)\n")])]),a("h3",[s._v("完整示例")]),a("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNrFVc1u00AQfpXRIpQEpXYqcQpuVaAggdSCypHtYWNvkoX1ruVdN42qXHpEBU7lzI1bxQEJtc9D0z4Gs/6Lm0QIiQOWLO3OzPd945md9Ql5nCTeUcZJnwQmTEViwXCbJdtUiTjRqYUTSPmwC1rt6UxZHnXBjJmUenLAhzCDYapjaCFDq0bsCRXtsaRwUWLQLPlGjNaNmCWUUAVAleQWnM1FboHKpKSKKt+H208/rz9/ub44m5//mJ9/n3+8oCrUylgYcfsc43aZZQhhZqpCaHdgaxtOHCeTPLXtl29e7XvGpkKNxHDaLiU8xDpc26YZ73Q6VM3uyN1+OL05vVyR+yepIZOmoVVXsN0galSAT6rKtXMXAJd9iHSYxVxZx/pMcrd8Mn0RtVsl8qlWlgnF01anW6Ai1O4X7O6hxBkoaZgKs+XH1pkpmX+9LL6/6I17ZiWZCwzHQkYpVy747YJjiW6tyrLSr6uzm6tvy2J3BdeIHi58zbj/lEG1LG0VTihhD7S2+zrir7URVmiFyJbkQ9vqQivE1mGbDvPwWecRHgs8GoFfjB0OHG4sx1lhluMOIIjEEYSSGbNFSdnuXR5rSnJ3GSCihbc+DBgS+OhtBlZMVms5YC6k+pBgkFmrFeyEUoTvMaQxaBi2OpCBXyD+yHAH3ZyvJfQi0WoV+I064NbYqSxKslNeMZR4fnGvlCPjcRN7oTGUYF3d9QLgNUpWnYmJiOy4D5u93v08DiCpO5VyVBRHPHfkTXbvveXSVlQLIBsYLTNbAAFcv/vQK3dWJ4vNqvyYi9EYwx/2eslxpbxe90GlHLN0JFC3Yk1YFOEVVBnq1L2y03+Z8WaVQZl0vUdCPKV5D0iXFB1wN7n3zmiFP46cnpYO7EA9gZTgf6EYO8/HpZfi/Sdi7pq1MUj1xPAUSSgpJ2jNv6LArrbaocrcZmT2G71jRY0="}})])}],v={},l=v,i=t("2877"),_=Object(i["a"])(l,e,n,!1,null,null,null);a["default"]=_.exports}}]);