From fe55415b2da39bc7540c9c99b0605694c5c8bb24 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Thu, 13 Jun 2024 11:16:43 +0200
Subject: [PATCH] chore(docs): add state injection section to `useVueFlow` docs

---
 docs/src/guide/composables.md    | 25 +++++++++++++++++++++++++
 docs/src/guide/node.md           | 24 ++++++++++++++----------
 docs/src/guide/vue-flow/state.md |  2 +-
 3 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/docs/src/guide/composables.md b/docs/src/guide/composables.md
index 5b4bf2c2..d5cd44d0 100644
--- a/docs/src/guide/composables.md
+++ b/docs/src/guide/composables.md
@@ -35,6 +35,7 @@ onInit((instance) => {
   }
 })
 </script>
+
 <template>
   <VueFlow :nodes="nodes" :edges="edges" />
 </template>
@@ -43,6 +44,30 @@ onInit((instance) => {
 `useVueFlow` exposes the whole internal state, including the nodes and edges.
 The values are reactive, meaning changing the values returned from `useVueFlow` will trigger changes in the graph.
 
+### State creation and injection
+
+The `useVueFlow` composable creates, on first call, a new instance of the `VueFlowStore` and injects it into the Vue component tree.
+This allows you to access the store from any child component using the `useVueFlow` composable.
+
+This also means that the *first call* of `useVueFlow` is crucial as it determines the state instance that will be used throughout the component tree.
+You can think of it as a sort of `<VueFlowProvider>` wrapper that is automatically injected into the component tree.
+
+You can read more about this in the [State section of the guide](/guide/vue-flow/state).
+
+#### Enforcing a specific state instance
+
+If necessary, you can enforce the use of a specific state instance by passing an `id` to the `useVueFlow` composable.
+
+```ts
+import { useVueFlow } from '@vue-flow/core'
+
+const { onInit } = useVueFlow({ id: 'my-flow-instance' })
+
+onInit((instance) => {
+  // `instance` is the same type as the return of `useVueFlow` (VueFlowStore)
+})
+```
+
 ## [useHandleConnections](/typedocs/functions/useHandleConnections)
 
 `useHandleConnections` provides you with an array of connections that are connected to the node you pass to it.
diff --git a/docs/src/guide/node.md b/docs/src/guide/node.md
index 26ec7b42..ddc5a3b4 100644
--- a/docs/src/guide/node.md
+++ b/docs/src/guide/node.md
@@ -136,7 +136,7 @@ Sidebar or Toolbar.
 
 <script setup>
 import { ref } from 'vue'
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref([
   {
@@ -167,10 +167,12 @@ function onAddNodes() {
 </script>
 
 <template>
-  <VueFlow :nodes="initialNodes" />
-  
-  <button type="button" @click="onAddNode">Add a node</button>
-  <button type="button" @click="onAddNodes">Add multiple nodes</button>
+  <VueFlow :nodes="initialNodes">
+    <Panel>
+      <button type="button" @click="onAddNode">Add a node</button>
+      <button type="button" @click="onAddNodes">Add multiple nodes</button>
+    </Panel>
+  </VueFlow>
 </template>
 ```
 
@@ -178,7 +180,7 @@ function onAddNodes() {
 <script setup lang="ts">
 import { ref } from 'vue'  
 import type { Node } from '@vue-flow/core'  
-import { VueFlow, useVueFlow } from '@vue-flow/core'
+import { Panel, VueFlow, useVueFlow } from '@vue-flow/core'
 
 const initialNodes = ref<Node[]>([
   {
@@ -213,10 +215,12 @@ function onAddNodes() {
 </script>
 
 <template>
-  <VueFlow :nodes="initialNodes" />
-  
-  <button type="button" @click="onAddNode()">Add a node</button>
-  <button type="button" @click="onAddNodes()">Add multiple nodes</button>
+  <VueFlow :nodes="initialNodes">
+    <Panel>
+      <button type="button" @click="onAddNode">Add a node</button>
+      <button type="button" @click="onAddNodes">Add multiple nodes</button>
+    </Panel>
+  </VueFlow>
 </template>
 ```
 
diff --git a/docs/src/guide/vue-flow/state.md b/docs/src/guide/vue-flow/state.md
index b6bafc4d..94641132 100644
--- a/docs/src/guide/vue-flow/state.md
+++ b/docs/src/guide/vue-flow/state.md
@@ -1,6 +1,6 @@
 # State
 
-##
+## Introduction
 
 Under the hood Vue Flow uses [Provide/Inject](https://v3.vuejs.org/guide/component-provide-inject)
 to pass around it's state between components.