状态

¥State

Vue Flow 的底层使用 提供/注入 在组件之间传递其状态。你可以通过 useVueFlow 可组合项访问内部状态。

¥Under the hood Vue Flow uses Provide/Inject to pass around it's state between components. You can access the internal state through the useVueFlow composable.

useVueFlow 可用于创建新的状态实例并将其注入当前组件树，或从当前上下文注入现有存储。内部状态可以被操作，例如，通过向状态中添加新元素。状态是反应式的，更改将反映在图表上。

¥useVueFlow can be used to either create a new state instance and inject it into the current component tree or inject an already existing store from the current context. Internal state can be manipulated, for example by adding new elements to the state. The state is reactive and changes will be reflected on the graph.

<script setup>
import { useVueFlow } from '@vue-flow/core'

const { getNodes, onPaneReady } = useVueFlow()

// event handler
onPaneReady((i) => i.fitView())

// watch the stored nodes
watch(getNodes, (nodes) => console.log('nodes changed', nodes))
</script>

访问内部状态

¥Accessing Internal State

使用组合 API 还允许我们在当前组件上下文之外传递状态，因此在读取、写入和更新状态时拥有更大的灵活性。

¥Using the composition API also allows us to pass the state around outside the current component context, thus we have a lot more flexibility when it comes to reading, writing and updating the state.

考虑以下示例，我们想要创建一个侧边栏，以便我们能够选择所有节点。

¥Consider this example, where we want to create a Sidebar that allows us to select all nodes.

<!-- Container.vue -->
<template>
  <div>
    <Sidebar />
    <div class="wrapper">
      <VueFlow :nodes="nodes" :edges="edges" />
    </div>
  </div>
</template>

我们可以将所有必要的信息作为 props 传递给侧边栏，这可能会变得繁琐或导致 prop 钻取，而这正是我们希望避免的。在这个例子中，这不是什么大问题，但如果我们的目标深度是 3 个组件，那么跟踪信息流就会变得困难。

¥We could pass all necessary info as props to the Sidebar, which could become either tedious or result in prop drilling, which we want to avoid. In this example it wouldn't be a big issue but if our destination was 3 components deep, it would become hard to track the flow of information.

相反，我们可以在初始化侧边栏之前初始化一个 Vue Flow 存储实例，这样该实例就可以作为组件树中的注入使用。

¥Instead, we can initialize a Vue Flow store instance before the Sidebar is initialized, thus the instance becomes available as an injection in the component tree.

<script>
// Container.vue
import { useVueFlow  } from '@vue-flow/core'

// initialize a store instance in this context, so it is available when calling inject(VueFlow)
useVueFlow()
</script>

现在我们可以轻松地从侧边栏访问当前状态实例，而无需将它们作为属性传递。

¥Now we can easily access our current state instance from our Sidebar without passing them as props.

<script setup>
import { useVueFlow } from '@vue-flow/core'

const { nodesSelectionActive, addSelectedNodes, getNodes } = useVueFlow()

const selectAll = () => {
  addSelectedNodes(getNodes.value)
  nodesSelectionActive.value = true
}
</script>
<template>
  <aside>
    <div class="description">
      This is an example of how you can access the internal state outside of the Vue VueFlow component.
    </div>
    <div class="selectall">
      <button @click="selectAll">select all nodes</button>
    </div>
  </aside>
</template>

提示

如果你在同一个上下文中有多个 store 实例，请确保为它们分配唯一的 ID，以确保访问正确的实例。否则，useVueFlow 将尝试注入它在当前上下文中找到的第一个实例，这通常是最后一个注入的实例。

¥If you have multiple store instances in the same context, make sure to give them a unique id in order to guarantee access to the correct instance. Otherwise useVueFlow will try to inject the first instance it can find in the current context, which would usually be the last one that has been injected.

状态更新

¥State Updates

默认情况下，会应用状态更新，例如删除元素或更新位置。如果你想严格控制状态变化，可以通过将 applyDefault 选项/属性设置为 false 来禁用此行为。

¥State updates like removing elements or updating positions are applied by default. If you want to strictly control state changes you can disable this behavior by setting the applyDefault option/prop to false.

<template>
    <VueFlow :nodes="nodes" :edges="edges" :apply-default="false" />
</template>

状态更改由 onNodesChange 或 onEdgesChange 事件触发，这些事件将提供已触发更改的数组。要控制状态变化，你可以实现自己的状态更新处理程序，或使用库自带的状态辅助函数进行混合。

¥State changes are emitted by the onNodesChange or onEdgesChange events, which will provide an array of changes that have been triggered. 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.

信息

更多详情请参阅 受控流 指南。

¥Read more about this in the controlled flow guide.

在选项中访问状态 API

¥Access State in Options API

useVueFlow 设计用于组合 API，但仍可在选项 API 中使用它。不过，你需要为 Vue Flow 状态实例传递一个唯一的 ID，否则查找将失败，并且 Vue Flow 将在挂载时创建一个新的状态实例。

¥useVueFlow was designed to be used in the composition API, but it is still possible to use it in the options API. Though it is necessary to pass a unique id for your Vue Flow state instance, otherwise a look-up will fail and Vue Flow will create a new state instance when mounted.

<script>
import { VueFlow, useVueFlow } from '@vue-flow/core'

const { addEdges, onConnect } = useVueFlow({ id: 'options-api' })
export default defineComponent({
  components: { VueFlow },
  data() {
    return {
      nodes: [
        {
          id: '1',
          position: { x: 0, y: 0},
          data: { label: 'Node 1' }
        }
      ],
      edges: [],
    }
  },
  methods: {
    // regular event handler
    handleConnect: (params) => {
      addEdges([params])
    }
  },
  beforeMount() {
    // Register your event handler, can technically be called in any lifecycle phase
    // Skip this if you're using regular event handlers
    onConnect((params) => addEdges([params]))
  }
})
</script>

<template>
  <VueFlow id="options-api" :nodes="nodes" :edges="edges" @connect="handleConnect" />
</template>