search

bcakmakoglu / vue-flow

A 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://vueflow.dev/
MIT License
3.74k stars 242 forks source link

🐛 [BUG]: Build DnD example with pinia cannot create edges #1603

Closed Fnxxxxo closed 2 weeks ago

Fnxxxxo commented 2 weeks ago

Is there an existing issue for this?

Current Behavior

If I invoke useVueFlow in a pinia store. Nodes state seams to be broken. If I drag two new nodes to the canvas. They cannot be linked.

Expected Behavior

Nodes should be connected

Steps To Reproduce

See demo

Relevant log output

No response

Anything else?

No response

bcakmakoglu commented 2 weeks ago

You're not supposed to invoke useVueFlow in a pinia store. Idk where you saw that and why you assume that would work but it won't.

useVueFlow relies on provide/inject to share the state and invoking it inside a store will create a state that's not injectable in the <VueFlow> component causing it to create a new state internally, so the state you have in your store isn't the same as the one used by VueFlow.

Either assign a fixed id to useVueFlow like useVueFlow('my-state-id') and pass the id to <VueFlow id="my-state-id" ...> or avoid invoking useVueFlow in your store.