Pinia Store

In large-scale applications, managing complex graph data within a local component ref can become difficult to maintain and share across views. The recommended approach is to use Pinia to handle all flow-related states, treating it as a centralized, reactive database for your diagramming logic.

Pinia Integration Demo

In this demo, all node positions, edge configurations, and viewport transformations are synchronized with a Pinia store. This ensures data persistence across page transitions and enables complex cross-component interactions.

Total Nodes: 1

Managed by Pinia

Centralized State Management

Best Practices

1. Setup Styles: We strongly recommend using Pinia's "Setup Store" (functional syntax). This allows you to use standard Vue Composition API features like computed and watch inside your store, which aligns perfectly with Flow's architecture.
2. Granular Updates: For performance reasons, avoid large-scale array replacements unless necessary. Modifying specific properties deeper in the node object (e.g., node.data.label = 'Value') is highly efficient as it leverages Vue's fine-grained reactivity.
3. Cross-Instance Syncing: If your application uses multiple Flow instances, Pinia is the ideal choice for sharing logic and state (like a unified "clipboard") between them.