<SvelteFlowProvider />
<SvelteFlowProvider /> 組件會將其子節點包裝在一個 Svelte 環境中，這樣就可以在 <SvelteFlow /> 組件之外存取流程的內部狀態。我們提供的許多 hooks 都依賴此組件才能運作。
App.svelte
<script>
import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte';
import Sidebar from './Sidebar.svelte';
</script>
<SvelteFlowProvider>
<SvelteFlow nodes={...} edges={...} />
<Sidebar />
</SvelteFlowProvider>Sidebar.svelte
<script>
import { SvelteFlow, SvelteFlowProvider } from '@xyflow/svelte'
// This hook will only work if the component it's used in is a child of a
// <SvelteFlowProvider />.
const nodes = useNodes()
</script>
<aside>
{#each $nodes as node (node.id)}
<div key={node.id}>
Node {node.id} -
x: {node.position.x.toFixed(2)},
y: {node.position.y.toFixed(2)}
</div>
{/each}
</aside>注意事項
- 如果您正在使用路由器並希望您的流程狀態在路由之間保持持久，則將
<SvelteFlowProvider />組件放置在路由器之外至關重要。 - 如果您在同一個頁面上有多個流程，您將需要使用單獨的
<SvelteFlowProvider />。