feat: try to dispose states on unmount

Signed-off-by: bcakmakoglu <78412429+bcakmakoglu@users.noreply.github.com>

src/store/actions.ts

@@ -1,3 +1,4 @@
+import useState from './state'
 import {
   CoordinateExtent,
   EdgeChange,
@@ -304,5 +305,8 @@ export default (state: State, getters: ComputedGetters): Actions => {
     setConnectionNodeId,
     setInteractive,
     setState,
+    $reset: () => {
+      setState(useState())
+    },
   }
 }

src/store/state.ts

@@ -97,7 +97,7 @@ export default (opts?: FlowOptions): State => {
     applyDefault: true,
 
     vueFlowVersion: typeof __VUE_FLOW_VERSION__ !== 'undefined' ? __VUE_FLOW_VERSION__ : '-',
-  }
+  } as State
 
   if (opts) {
     if (typeof opts.panOnScroll !== 'undefined') state.panOnScroll = opts.panOnScroll

src/store/store.ts

@@ -1,31 +1,38 @@
 import useState from './state'
 import useActions from './actions'
 import useGetters from './getters'
-import { FlowHooksOn, FlowOptions, Store } from '~/types'
+import { FlowHooksOn, FlowOptions, Store, State } from '~/types'
 
 export default (preloadedState?: FlowOptions): Store => {
-  const state = reactive(useState(preloadedState))
-  const getters = useGetters(state)
-  const actions = useActions(state, getters)
+  const state: State = useState(preloadedState)
+  const reactiveState = reactive(state)
+  const getters = useGetters(reactiveState)
+  const actions = useActions(reactiveState, getters)
   const hooksOn: FlowHooksOn = <any>{}
-  Object.entries(state.hooks).forEach(([n, h]) => {
+  Object.entries(reactiveState.hooks).forEach(([n, h]) => {
     const name = `on${n.charAt(0).toUpperCase() + n.slice(1)}`
     hooksOn[<keyof FlowHooksOn>name] = h.on as any
   })
-  actions.setState(state)
+  actions.setState(reactiveState)
   if (preloadedState) {
     if (preloadedState.modelValue) actions.setElements(preloadedState.modelValue)
     if (preloadedState.nodes) actions.setNodes(preloadedState.nodes)
     if (preloadedState.edges) actions.setEdges(preloadedState.edges)
   }
 
-  return {
-    state,
+  const store = {
+    state: reactiveState,
     actions,
     getters,
     hooksOn,
-    ...toRefs(state),
+    ...toRefs(reactiveState),
     ...getters,
     ...actions,
   } as unknown as Store
+
+  onScopeDispose(() => {
+    store.$reset()
+  })
+
+  return store
 }