diff --git a/.changeset/beige-shoes-fold.md b/.changeset/beige-shoes-fold.md new file mode 100644 index 00000000..9473875c --- /dev/null +++ b/.changeset/beige-shoes-fold.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Check if injected vue flow state matches options id, otherwise create new state diff --git a/.changeset/funny-jokes-lie.md b/.changeset/funny-jokes-lie.md new file mode 100644 index 00000000..c8099b7f --- /dev/null +++ b/.changeset/funny-jokes-lie.md @@ -0,0 +1,5 @@ +--- +"@vue-flow/core": patch +--- + +Prefer options id over scope id when finding vue flow internal state by id diff --git a/packages/core/src/composables/useVueFlow.ts b/packages/core/src/composables/useVueFlow.ts index c4f7427a..5368a7f9 100644 --- a/packages/core/src/composables/useVueFlow.ts +++ b/packages/core/src/composables/useVueFlow.ts @@ -33,7 +33,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore { const options = isOptsObj ? idOrOpts : { id: idOrOpts } const id = options.id - const vueFlowId = scope?.vueFlowId || id + const vueFlowId = id ?? scope?.vueFlowId let vueFlow: Injection @@ -42,9 +42,9 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore { * this should be the regular way after initialization */ if (scope) { - const injection = inject(VueFlow, null) - if (typeof injection !== 'undefined' && injection !== null) { - vueFlow = injection + const injectedState = inject(VueFlow, null) + if (typeof injectedState !== 'undefined' && injectedState !== null && (!vueFlowId || injectedState.id === vueFlowId)) { + vueFlow = injectedState } } @@ -63,7 +63,7 @@ export function useVueFlow(idOrOpts?: any): VueFlowStore { * _or_ if the store instance we found does not match up with provided ids * create a new store instance and register it in storage */ - if (!vueFlow || (vueFlow && id && id !== vueFlow.id)) { + if (!vueFlow || (vueFlowId && vueFlow.id !== vueFlowId)) { const name = id ?? storage.getId() const state = storage.create(name, options)