如何在Vue中实现基于jsmind的思维导图的数据驱动展示？

背景介绍

思维导图是我们平时经常用的一种思维表达工具，它能够将我们的思路以一定的层次、关系进行组织，非常适合于展示一些复杂的关系网络。在前端开发中，有一些好用的思维导图库，如GoJS、JointJS等，其中基于JSMind开发的思维导图库使用简单、易扩展，是我们的一种不错的选择。

什么是JSMind？

JSMind 是一个简洁、使用方便的前端思维导图库，可以方便地在 Web 应用中集成。它是由弘扬科技在 MIT 协议下发布的，Github 地址：https://github.com/hizzgdev/jsmind。

JSMind 设计原则

简单易用

可扩展性强

组件化设计

Vue 中集成 JSMind

JSMind 在集成时，只需引入它的相关 JS 和 CSS 文件，并在页面中添加一个用于承载思维导图的 DIV 容器即可。而在 Vue 中，我们可以将 JSMind 封装成 Vue 的一个组件，以实现在 Vue 中完全数据驱动的思维导图展示。

Vue 组件中引入 JSMind

在 Vue 组件中，我们通常会通过 import 引入需要的依赖包。因此，我们可以在组件的 script 中这样引入 JSMind：

import jsMind from 'jsmind' // 引入 JSMind 库
import 'jsmind/style/jsmind.css' // 引入样式文件

创建组件及容器

在 Vue 中，我们通过定义一个组件来使用 JSMind。组件的模板中需要有一个容器元素，用于承载 JSMind。因此，我们可以在模板中这样定义容器元素：

<template>
  <div ref="mindContainer"></div>
</template>

需要注意的是，在容器元素上添加了 ref 属性，用于在组件钩子函数中获取容器元素的引用。

钩子函数中初始化 JSMind

当 Vue 组件被挂载到页面上时，会执行 mounted 钩子函数，在这个函数中，我们可以通过容器引用创建 JSMind 实例，来完成思维导图的初始化。可以这样实现：

mounted() {
  const options = {
    container: this.$refs.mindContainer, // 容器
    editable: true, // 是否允许编辑
    theme: 'primary' // 主题颜色，默认值为 'primary'
  }
  const mind = new jsMind(options) // 创建 jsMind 对象
  // 设置思维导图数据
  const mindData = {
    meta: {name: 'jsMind demo'},
    format: 'node_array',
    data: [
      {id: 'root', isroot: true, topic: 'jsMind'},
      {id: 'sub1', parentid: 'root', direction: 'right', topic: 'sub1'},
      {id: 'sub2', parentid: 'root', direction: 'right', topic: 'sub2'},
      {id: 'sub3', parentid: 'root', direction: 'right', topic: 'sub3'},
      {id: 'sub4', parentid: 'root', direction: 'right', topic: 'sub4'},
      {id: 'sub5', parentid: 'root', direction: 'right', topic: 'sub5'}
    ]
  }
  mind.show(mindData) // 展示思维导图
}

如此，我们便可以在 Vue 组件中初始化 JSMind 了，并使用 show 方法展示出思维导图。

数据驱动思维导图

在实际开发中，我们通常需要将数据（如公司组织架构）以树形结构的方式呈现在思维导图中，并且需要支持对这些树形数据的编辑、删除等操作，因此，引入外部数据便是实现数据驱动思维导图的关键。

思维导图数据模型

JSMind 的思维导图数据模型包括两个主要的部分：META 信息和 NODE_ARRAY 节点信息。META 信息用于存储原始思维导图的配置信息，而NODE_ARRAY 节点信息是一个数组，用于存储 JSMind 中节点的数据。

下面是一个示例的 META 信息配置：

{
  viewProvider: "html",
  theme: 'primary',
  layout: {
  

horizontal: true,
  

direct: 'right'
  },
  mode: 'full',
  editable: true,
  multipleSelect: true
}

下面是一个示例的 NODE_ARRAY 数据信息：

[
  {"id":"root","topic":"根节点","direction":"right","isroot":true},
  {"id":"node1","parentid":"root","topic":"节点1","direction":"right","collapsed":false},
  {"id":"node2","parentid":"root","topic":"节点2","direction":"right","collapsed":false},
  {"id":"node3","parentid":"root","topic":"节点3","direction":"right","collapsed":false},
  {"id":"node4","parentid":"node3","topic":"节点4","direction":"right","collapsed":false},
  {"id":"node5","parentid":"node3","topic":"节点5","direction":"right","collapsed":false},
  {"id":"node6","parentid":"node3","topic":"节点6","direction":"right","collapsed":false},
  {"id":"node7","parentid":"node4","topic":"节点7","direction":"right","collapsed":false},
  {"id":"node8","parentid":"node7","topic":"节点8","direction":"right","isroot":false,"collapsed":false}
]

通过组件属性传递思维导图数据

为了实现数据驱动，我们需要将思维导图的数据绑定到 Vue 组件的属性上，当我们修改了数据属性时，思维导图也会随着更新。传递数据最简单的方式，便是通过 Vue 组件的 props 属性，将数据传递到组件中，示例代码如下：

<template>
  <div ref="mindContainer"></div>
</template>
<script>
import jsMind from 'jsmind'
import 'jsmind/style/jsmind.css'
export default {
  props: ['mindData'], // 定义 props 属性
  mounted() {
    const options = {
      container: this.$refs.mindContainer,
      editable: true,
      theme: 'primary'
    }
    const mind = new jsMind(options)
    mind.show(this.mindData) // 展示思维导图，使用传递下来的 mindData 属性
  }
}
</script>

以上代码中，我们定义了一个名为 mindData 的组件属性，用于存储思维导图的数据。然后在 mounted 钩子函数中，使用传递下来的 mindData 属性展示思维导图，并完成数据驱动的改变。

总结

通过以上的介绍，我们了解了 JSMind 思维导图库的使用和在 Vue 中实现数据驱动思维导图的方法。在实际项目中，我们可以根据实际需求进行扩展，如支持导出思维导图，或者根据搜索关键词高亮展示思维导图等。有了 JSMind 这个便捷好用的库，我们的前端开发工作将更加高效便捷。