fix: ensure scope dispose is run

This commit is contained in:
Braks
2022-04-24 13:34:22 +02:00
parent 1b97109b94
commit c4f9b2c780
2 changed files with 26 additions and 15 deletions
+16 -13
View File
@@ -126,20 +126,15 @@ export default (options?: Options): VueFlowStore => {
if (scope) {
scope.vueFlowId = name
// dispose of state values and storage entry
onScopeDispose(() => {
vueFlow?.$reset()
storage.remove(name)
vueFlow = null
})
if (reactiveOptions) {
scope.run(() => {
watch(reactiveOptions, (opts) => {
vueFlow?.setState(opts)
onBeforeMount(() => {
if (reactiveOptions) {
scope.run(() => {
watch(reactiveOptions, (opts) => {
vueFlow?.setState(opts)
})
})
})
}
}
})
}
} else {
// if composable was called with additional options after initialization, overwrite state with the options values
@@ -154,6 +149,14 @@ export default (options?: Options): VueFlowStore => {
// always provide a fresh instance into context on call
if (scope) {
provide(VueFlow, vueFlow)
// dispose of state values and storage entry
onScopeDispose(() => {
if (storage.get(vueFlow!.id)) {
storage.remove(vueFlow!.id)
}
vueFlow = null
})
}
return vueFlow
+10 -2
View File
@@ -32,12 +32,20 @@ const modelValue = useVModel(props, 'modelValue', emit)
const modelNodes = useVModel(props, 'nodes', emit)
const modelEdges = useVModel(props, 'edges', emit)
const { id, hooks, getNodeTypes, getEdgeTypes, ...rest } = useVueFlow()
const { id, hooks, getNodeTypes, getEdgeTypes, $reset, ...rest } = useVueFlow({ id: props.id })
const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props,{ id, hooks, getNodeTypes, getEdgeTypes, ...rest })
const dispose = useWatch({ modelValue, nodes: modelNodes, edges: modelEdges }, props, {
id,
hooks,
getNodeTypes,
getEdgeTypes,
$reset,
...rest,
})
onUnmounted(() => {
dispose()
$reset()
})
useHooks(emit, hooks.value)