storeToRefs()

Source on GitHub 

The storeToRefs helper destructures the reactive state returned by useVueFlowStore() into refs without losing reactivity — the same pattern as Pinia’s storeToRefs. Destructuring the store object directly would break reactivity on its value fields; storeToRefs keeps each field reactive.

<script setup lang="ts">
import { storeToRefs, useVueFlowStore } from '@xyflow/vue';
 
const store = useVueFlowStore();
const { transform, dimensions } = storeToRefs(store);
 
// `transform` and `dimensions` stay reactive
</script>

Signature

function storeToRefs<NodeType extends Node, EdgeType extends Edge>(
  store: VueFlowState<NodeType, EdgeType>,
): ToRefs<VueFlowState<NodeType, EdgeType>>;

It takes the reactive state from useVueFlowStore() and returns an object of refs — one per state field — so you can destructure without losing reactivity.

Notes

• Use storeToRefs for value and array fields. The map-like lookups (nodeLookup, edgeLookup, parentLookup, connectionLookup) are reference types and can be destructured straight off useVueFlowStore().