Pinia 存储 (Pinia Store)

在大型应用中，将节点和连线数据存储在 Vue 组件的本地 ref 中往往难以维护。最推荐的做法是使用 Pinia 来接管所有的流程图状态，将其视为一种特殊的响应式数据库。

Pinia 集成示例

在该示例中，所有的节点位置、连线和视口变换都存储在一个中心化的 Pinia Store 中。哪怕您切换页面再回来，状态依然被可靠地保留。

总节点数: 1

由 Pinia 管理

中心化状态管理

最佳实践

1. Setup 风格：我们强烈建议使用 Pinia 的 "Setup Store"（函数式语法）。这允许您在 Store 内部使用标准的 Vue 组合式 API 功能（如 computed 和 watch），这与 Flow 的架构完美契合。
2. 细粒度更新：出于性能考虑，除非必要，否则应避免大规模的数组替换。直接修改节点对象内部的特定属性（例如 node.data.label = 'Value'）是非常高效的，因为它利用了 Vue 的细粒度响应式系统。
3. 多实例同步：如果您的应用使用多个 Flow 实例，Pinia 是在它们之间共享逻辑和状态（如统一的“剪贴板”）的理想选择。