前端UI组件【免费下载链接】vue-flowA highly customizable Flowchart component for Vue 3. Features seamless zoom pan , additional components like a Minimap and utilities to interact with state and graph.项目地址https://gitcode.com/gh_mirrors/vu/vue-flow点击查看免费下载Vue Flow 的图状态节点、边、视口、选中态等并非散落在各个组件里而是由一个基于 Provide/Inject 机制的集中式 store 统一管理。本篇指南以官方文档 state.md 为骨架结合仓库源码讲透如何通过useVueFlow组合式函数访问、注入、创建与操作内部状态如何在组件树之外读写状态以及如何通过applyDefault关闭自动变更、实现完全受控的流程图。读完本文你将掌握useVueFlow的注入与创建两条路径、跨组件共享状态的正确姿势、Options API 下的兼容用法以及从自动应用变更到手动应用变更的完整受控流方案。一、状态架构Provide/Inject 全局 StorageVue Flow 的状态管理建立在 Vue 3 的 Provide/Inject 机制之上VueFlow组件在挂载时会把自己的 store 实例 provide 到组件树中子树中的任何组件都可以通过useVueFlow注入到这份状态。注入所用的 InjectionKey 定义在 context/index.tsexport const VueFlow: InjectionKeyVueFlowStore Symbol(vueFlow)除了依赖注入之外Vue Flow 还维护了一个全局的Storage单例实现见 utils/storage.ts用Mapstring, VueFlowStore按 id 登记所有已创建的 store 实例并挂载到appContext.app的全局属性上。这样即使在没有注入上下文的场景例如 Options API 的beforeMount生命周期只要传入正确的 id依然能按 id 从 Storage 中取回同一个实例。值得注意的一点是store 状态是响应式的。Storage.create通过reactive(state)创建响应式状态见 utils/storage.ts因此任何对状态的修改如新增节点、拖动改变位置都会实时反映到图上。文档中的示例展示了这一点script setup import { useVueFlow } from vue-flow/core const { getNodes, onPaneReady } useVueFlow() // event handler onPaneReady((i) i.fitView()) // watch the stored nodes watch(getNodes, (nodes) console.log(nodes changed, nodes)) /scriptgetNodes是一个computedref见 getters.ts可以像普通 ref 一样被watch从而在节点集合变化时触发回调。二、useVueFlow注入已有 store 还是创建新实例useVueFlow是整个状态访问体系的入口它的完整实现位于 composables/useVueFlow.ts支持两种调用签名export function useVueFlow(id?: string): VueFlowStore export function useVueFlow(options?: FlowOptions): VueFlowStore其查找逻辑按以下优先级进行从当前上下文注入如果当前处于某个 setup 作用域内尝试inject(VueFlow)获取组件树中已提供的 store若传入了 id 或当前 scope 带有vueFlowId还会校验注入实例的 id 是否匹配见 useVueFlow.ts。从全局 Storage 查找注入失败时若有 id显式传入或来自当前 scope 的vueFlowId则从 Storage 中按 id 取回见 useVueFlow.ts。创建新实例两步都找不到、或找到的实例 id 与传入 id 不符时调用storage.create(name, options)创建全新 store 并注册进 Storage见 useVueFlow.ts。无论走哪条路径最终都会把取到的 storeprovide回当前上下文并记录vueFlowId见 useVueFlow.ts保证后续调用能稳定命中同一个实例。另外若以 options 对象形式传入且当前不在VueFlow组件内部会触发ErrorCode.USEVUEFLOW_OPTIONS错误提示——因为带 options 的调用语义是创建新实例在已存在上下文中这样做容易造成实例混乱见 useVueFlow.ts。store 实例本身是一个包含三部分能力的聚合对象见 utils/storage.tshooksonNodesChange、onConnect、onPaneReady等全部事件钩子gettersgetNodes、getEdges、getSelectedNodes等只读计算属性actionsaddNodes、removeNodes、applyNodeChanges、setViewport等操作方法。三、在组件树外部访问状态跨组件共享实战组合式 API 的最大红利在于store 实例一旦创建就可以脱离当前组件上下文被任意传递从而规避 props 逐层透传prop drilling的问题。文档中的经典场景是根组件里同时渲染Sidebar和VueFlowSidebar 需要全选所有节点的能力。首先在 Container 中提前初始化store 实例关键是必须在 Sidebar 初始化之前执行script // Container.vue import { useVueFlow } from vue-flow/core // initialize a store instance in this context, so it is available when calling inject(VueFlow) useVueFlow() /script template div Sidebar / div classwrapper VueFlow :nodesnodes :edgesedges / /div /div /template接着 Sidebar 组件里直接注入同一份状态无需任何 propsscript setup import { useVueFlow } from vue-flow/core const { nodesSelectionActive, addSelectedNodes, getNodes } useVueFlow() const selectAll () { addSelectedNodes(getNodes.value) nodesSelectionActive.value true } /script template aside div classdescription This is an example of how you can access the internal state outside of the Vue VueFlow component. /div div classselectall button clickselectAllselect all nodes/button /div /aside /templateaddSelectedNodes的实现会基于节点 id 集合生成 selection change并通过state.hooks.nodesChange.trigger(...)通知所有监听者见 actions.ts在非多选模式下还会同时取消边的选中态。由于默认applyDefault为true这些变更会被默认处理器自动应用到节点与边上。::: tip 如果同一上下文中存在多个 store 实例例如在一个页面里渲染多个相互独立的VueFlow务必为每个实例指定唯一的 id。否则useVueFlow会注入它在当前上下文中找到的第一个实例——通常是最后被注入的那个容易拿错状态。 :::四、多实例与唯一 id为 store 指定 id 有两种方式调用useVueFlow({ id: my-flow })或在VueFlow组件上传idprop。当显式传入 id 时useVueFlow的查找会校验injectedState.id vueFlowId并优先从 Storage 按 id 精确取回对应实例见 useVueFlow.ts从而避免拿到第一个碰到的实例。不传 id 时Storage.getId()会生成自增 id格式vue-flow-0、vue-flow-1...见 storage.ts。也就是说文档中的多实例必须唯一 id建议本质上是为了绕过注入默认取最后一个实例的歧义改用精确寻址。五、状态更新与 applyDefault从自动到受控5.1 默认行为自动应用变更默认情况下删除元素、更新位置、选择/取消选择等交互产生的状态变更会被自动应用。applyDefault的默认值在 store/state.ts 中定义为true。这份自动应用的接线发生在useVueFlow创建实例时它通过watch(state.applyDefault, ...)注册默认的 nodes/edges 变更处理器见 useVueFlow.tsconst nodesChangeHandler (changes: NodeChange[]) { state.applyNodeChanges(changes) } const edgesChangeHandler (changes: EdgeChange[]) { state.applyEdgeChanges(changes) }当shouldApplyDefault为真时处理器被挂到onNodesChange/onEdgesChange上为假时则从 hooks 上摘除同时在作用域销毁时清理避免内存泄漏。这段逻辑注释里特别说明必须在VueFlow组件挂载之前注册默认 hooks否则在组件未挂载时调用addNodes将不会触发任何变更。5.2 关闭自动应用如果你希望完全掌控状态变更例如先校验再落地把applyDefault设为falsetemplate VueFlow :nodesnodes :edgesedges :apply-defaultfalse / /templateapplyDefault是VueFlow的合法 prop定义见 VueFlow.vue组件挂载后会通过 props 监听同步到 store见 useWatchProps.ts因此无论用 prop 还是useVueFlow({ applyDefault: false })都有效。5.3 变更事件与手动应用状态变更统一通过onNodesChange/onEdgesChange事件对外暴露事件参数是变更数组NodeChange[]/EdgeChange[]。即使开启了自动应用这两个事件也照常触发你可以用它来监听也可以用applyNodeChanges/applyEdgeChanges手动应用。手动应用函数定义在 actions.tsconst applyNodeChanges: Actions[applyNodeChanges] (changes) { return applyChanges(changes, state.nodes) } const applyEdgeChanges: Actions[applyEdgeChanges] (changes) { const changedEdges applyChanges(changes, state.edges) updateConnectionLookup(state.connectionLookup, edgeLookup.value, changedEdges) return changedEdges }关于变更的边界这里的 change 专指交互或 API 触发的增删改add、remove、select、position、dimensions不包括缩放、平移等视口变化也不包括直接修改节点data对象。Vue Flow 不会替你追踪 nodes/edges 数组的任意变化——直接filter掉一个节点不会触发任何 change 事件必须走removeNodes()或applyNodeChanges()这类 API。完整的受控流方案禁用自动应用 → 监听变更 → 校验 → 手动应用如删除节点前弹确认框请参阅仓库文档 controlled-flow.md若需要把内部状态与自己的 state 双向同步还可以使用v-model:nodes与v-model:edges。六、在 Options API 中访问状态useVueFlow虽为组合式 API 设计但 Options API 同样可用前提是必须传入唯一 id——否则查找会失败Vue Flow 会在组件挂载时新建一个实例导致你拿到的状态与VueFlow渲染用的状态不是同一个。官方完整示例script import { VueFlow, useVueFlow } from vue-flow/core const { addEdges, onConnect } useVueFlow({ id: options-api }) export default defineComponent({ components: { VueFlow }, data() { return { nodes: [ { id: 1, position: { x: 0, y: 0}, data: { label: Node 1 } } ], edges: [], } }, methods: { // regular event handler handleConnect: (params) { addEdges([params]) } }, beforeMount() { // Register your event handler, can technically be called in any lifecycle phase // Skip this if youre using regular event handlers onConnect((params) addEdges([params])) } }) /script template VueFlow idoptions-api :nodesnodes :edgesedges connecthandleConnect / /template要点拆解id 一致性useVueFlow({ id: options-api })与模板里的idoptions-api必须对应useVueFlow才会在beforeMount阶段从 Storage 中按 id 命中同一个实例两种事件订阅方式二选一通过connecthandleConnect模板监听走的是组件事件而onConnect((params) addEdges([params]))走的是 store hooks——hooks 注册理论上可在任意生命周期调用但必须在事件发生前完成文档注释明确说明Skip this if youre using regular event handlers即两者同时使用时注意避免重复添加。七、状态 API 速查useVueFlow返回的 store 覆盖了完整的状态操作面按职责划分如下类别代表性成员源码位置事件钩子onNodesChange、onEdgesChange、onConnect、onPaneReady、onNodeClick、onMove等 40 钩子hooks.ts只读 gettersgetNodes、getEdges、getSelectedNodes、getSelectedEdges、getNodeTypes、getEdgeTypesgetters.ts变更应用applyNodeChanges、applyEdgeChangesactions.ts增删改addNodes、addEdges、removeNodes、updateNode、updateNodeDataactions.ts选择操作addSelectedNodes、addSelectedEdges、removeSelectedNodesactions.ts状态属性nodesSelectionActive、applyDefault、viewport、zoom等全部响应式 refstate.ts其中getNodes/getEdges在开启onlyRenderVisibleElements时只返回视口内可见元素见 getters.ts适合大图性能优化场景。八、小结Vue Flow 的状态体系可以用一句话概括集中式响应式 store Provide/Inject 注入 全局 Storage 按 id 寻址。useVueFlow是唯一入口它既能注入已有状态也能创建新状态默认开启的applyDefault让日常使用零成本关闭后则配合onNodesChange/onEdgesChange与applyNodeChanges/applyEdgeChanges实现完全受控的流程图。理解这条链路后无论是跨组件共享状态、多实例隔离还是 Options API 集成都能准确地拿到同一个状态实例。继续深入可阅读composables.md更多组合式函数、controlled-flow.md受控流完整指南、state.ts全部状态字段与默认值。赞分享前端UI组件【免费下载链接】vue-flowA highly customizable Flowchart component for Vue 3. Features seamless zoom pan , additional components like a Minimap and utilities to interact with state and graph.项目地址https://gitcode.com/gh_mirrors/vu/vue-flow点击查看免费下载相关推荐Vue Flow状态管理终极指南使用组合式API掌控复杂流程图Vue Flow状态管理终极指南使用组合式API掌控复杂流程图 Vue Flow是一个高度可定制的流程图组件专为Vue 3设计。它通过强大的 状态管理 系统前端UI组件电子课本下载粘贴课本链接PDF 批量存到本地电子课本下载粘贴课本链接PDF 批量存到本地 想把国家中小学智慧教育平台上的教材存到本地却只能对着预览页一张张截图tchMaterial parser网页爬虫教育Vue Flow 3 Composables 完全指南useVueFlow 状态管理、连接查询与自定义 Handle 的响应式交互Vue Flow 3 Composables 完全指南useVueFlow 状态管理、连接查询与自定义 Handle 的响应式交互 在 Vue Flow 前端UI组件上一篇告别手绘烦恼5款开源网络拓扑自动绘图工具推荐下一篇get-shit-done /gsd mvp-phase 完全指南从用户故事、SPIDR 拆分到垂直切片规划全流程解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
