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) { if (scope) {
scope.vueFlowId = name scope.vueFlowId = name
// dispose of state values and storage entry onBeforeMount(() => {
onScopeDispose(() => { if (reactiveOptions) {
vueFlow?.$reset() scope.run(() => {
storage.remove(name) watch(reactiveOptions, (opts) => {
vueFlow = null vueFlow?.setState(opts)
}) })
if (reactiveOptions) {
scope.run(() => {
watch(reactiveOptions, (opts) => {
vueFlow?.setState(opts)
}) })
}) }
} })
} }
} else { } else {
// if composable was called with additional options after initialization, overwrite state with the options values // 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 // always provide a fresh instance into context on call
if (scope) { if (scope) {
provide(VueFlow, vueFlow) provide(VueFlow, vueFlow)
// dispose of state values and storage entry
onScopeDispose(() => {
if (storage.get(vueFlow!.id)) {
storage.remove(vueFlow!.id)
}
vueFlow = null
})
} }
return vueFlow return vueFlow
+10 -2
View File
@@ -32,12 +32,20 @@ const modelValue = useVModel(props, 'modelValue', emit)
const modelNodes = useVModel(props, 'nodes', emit) const modelNodes = useVModel(props, 'nodes', emit)
const modelEdges = useVModel(props, 'edges', 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(() => { onUnmounted(() => {
dispose() dispose()
$reset()
}) })
useHooks(emit, hooks.value) useHooks(emit, hooks.value)