Pinia

import type { Connection, Edge, Node } from '@xyflow/vue';
import { shallowRef } from 'vue';
 
import { addEdge } from '@xyflow/vue';
import { defineStore } from 'pinia';
 
const initialNodes: Node[] = [
  { id: '1', type: 'input', data: { label: 'Node 1' }, position: { x: 250, y: 5 }, class: 'light' },
  { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 100 }, class: 'light' },
  { id: '3', data: { label: 'Node 3' }, position: { x: 400, y: 100 }, class: 'light' },
  { id: '4', data: { label: 'Node 4' }, position: { x: 400, y: 200 }, class: 'light' },
];
 
const initialEdges: Edge[] = [
  { id: 'e1-2', source: '1', target: '2' },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e3-4', source: '3', target: '4' },
];
 
export const useStore = defineStore('vue-flow-pinia', () => {
  const nodes = shallowRef<Node[]>(initialNodes);
 
  const edges = shallowRef<Edge[]>(initialEdges);
 
  function connect(connection: Connection) {
    edges.value = addEdge(connection, edges.value);
  }
 
  function reset() {
    nodes.value = initialNodes;
    edges.value = initialEdges;
  }
 
  function log() {
    console.log('nodes', nodes.value, 'edges', edges.value);
  }
 
  function toggleClass() {
    nodes.value = nodes.value.map((node) => ({
      ...node,
      class: node.class === 'dark' ? 'light' : 'dark',
    }));
  }
 
  function updatePositions() {
    nodes.value = nodes.value.map((node) => ({
      ...node,
      position: { x: Math.random() * 400, y: Math.random() * 400 },
    }));
  }
 
  return { nodes, edges, connect, reset, log, toggleClass, updatePositions };
});