alighasami/vue-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: update state page

Browse Source
This commit is contained in:
braks
2024-06-13 23:03:02 +02:00
parent 20d18eeed2
commit 7f2917a752
1 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
docs/src/guide/vue-flow/state.md
View File

@@ -42,7 +42,7 @@ Consider this example, where we want to create a Sidebar that allows us to selec
<div> <div>
<Sidebar /> <Sidebar />
<div class="wrapper"> <div class="wrapper">
<VueFlow v-model="elements" /> <VueFlow :nodes="nodes" :edges="edges" />
</div> </div>
</div> </div>
</template> </template>
@@ -105,9 +105,9 @@ If you want to strictly control state changes you can disable this behavior by s
to `false`. to `false`.
```vue ```vue
<div style="height: 300px"> <template>
<VueFlow v-model="elements" :apply-default="false" /> <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
</div> </template>
``` ```
State changes are emitted by the `onNodesChange` or `onEdgesChange` events, which will provide an array of changes that State changes are emitted by the `onNodesChange` or `onEdgesChange` events, which will provide an array of changes that
@@ -115,6 +115,10 @@ have been triggered.
To take control of state changes you can implement your own state update handlers or use the state helper functions that To take control of state changes you can implement your own state update handlers or use the state helper functions that
come with the library to mix it up. come with the library to mix it up.
::: info
Read more about this in the [controlled flow](/guide/controlled-flow) guide.
:::
## Access State in Options API ## Access State in Options API
`useVueFlow` was designed to be used in the composition API, __but__ it is still possible to use it in the options API. `useVueFlow` was designed to be used in the composition API, __but__ it is still possible to use it in the options API.
@@ -122,7 +126,7 @@ Though it is necessary to pass a unique id for your Vue Flow state instance, oth
will create a new state instance will create a new state instance
when mounted. when mounted.
```vue{4,32} ```vue
<script> <script>
import { VueFlow, useVueFlow } from '@vue-flow/core' import { VueFlow, useVueFlow } from '@vue-flow/core'
@@ -131,13 +135,14 @@ export default defineComponent({
components: { VueFlow }, components: { VueFlow },
data() { data() {
return { return {
elements: [ nodes: [
{ {
id: '1', id: '1',
label: 'Node 1',
position: { x: 0, y: 0}, position: { x: 0, y: 0},
data: { label: 'Node 1' }
} }
] ],
edges: [],
} }
}, },
methods: { methods: {
@@ -153,7 +158,8 @@ export default defineComponent({
} }
}) })
</script> </script>
<template> <template>
<VueFlow v-model="elements" id="options-api" @connect="handleConnect" /> <VueFlow id="options-api" :nodes="nodes" :edges="edges" @connect="handleConnect" />
</template> </template>
``` ```