---
title: "useSigmaById"
description: "按 id 取实例上下文，用于组件树之外或跨路由访问；useSigmaIds 列出全部已登记的 id。"
canonical_url: "https://sigma.mhaibaraai.cn/docs/composables/use-sigma-by-id"
---
# useSigmaById

> 按 id 取实例上下文，用于组件树之外或跨路由访问；useSigmaIds 列出全部已登记的 id。

## 用法

`useSigma()` 是 inject，只在子树内有效。工具栏、侧边面板、跨路由的代码拿不到上下文——给实例一个 `id`，就能在任何地方按 id 取：

```vue [UseSigmaByIdExample.vue]
<script setup lang="ts">
const { data } = await useFetch('/api/data.json')

const context = useSigmaById('by-id-demo')
const ids = useSigmaIds()

const order = computed(() => context.value?.graph.value.order ?? 0)

function zoomFromOutside() {
  context.value?.sigma.value?.getCamera().zoomIn({ duration: 300 })
}

function paintFromOutside() {
  context.value?.graph.value.setNodeAttribute('11.0', 'color', '#a855f7')
}
</script>

<template>
  <div class="flex-1 h-120 flex flex-col gap-2">
    <div class="flex items-center gap-2 pb-2 border-b border-default">
      <UButton size="xs" color="neutral" label="树外放大" :disabled="!context" @click="zoomFromOutside" />
      <UButton size="xs" color="neutral" label="树外给 Valjean 改色" :disabled="!context" @click="paintFromOutside" />
      <span class="text-muted text-xs">注册表：{{ ids.join('、') || '空' }} · 节点 {{ order }}</span>
    </div>

    <SigmaGraph id="by-id-demo" :data="data" class="flex-1 min-h-0" />
  </div>
</template>
```

## 示例

### 多实例

一页里可以放任意多个实例，各自独立，给了 `id` 就登记进全局注册表：

```vue [GraphMultiInstanceExample.vue]
<script setup lang="ts">
const { data: left } = await useFetch('/api/small.json')
const { data: right } = await useFetch('/api/data.json')
</script>

<template>
  <div class="flex-1 min-h-0 grid grid-cols-2 gap-2">
    <SigmaGraph id="multi-left" :data="left">
      <SigmaControls>
        <SigmaZoomControl />
      </SigmaControls>
    </SigmaGraph>

    <SigmaGraph id="multi-right" :data="right">
      <SigmaControls>
        <SigmaZoomControl />
      </SigmaControls>
    </SigmaGraph>
  </div>
</template>
```

## API

### useSigmaById()

`useSigmaById(id: MaybeRefOrGetter<string>): ComputedRef<SigmaContext | undefined>`

#### Parameters

**id** (`MaybeRefOrGetter<string>`) *required*: 目标实例的 id，与 SigmaGraph 的 id prop 对应。接受 ref 或 getter，可动态切换目标。

#### Returns

计算属性，目标未挂载或已卸载时为 `undefined`。其值即 `useSigma()` 的返回结构，字段说明见 [`useSigma`](https://sigma.mhaibaraai.cn/docs/composables/use-sigma)。

### useSigmaIds()

`useSigmaIds(): ComputedRef<string[]>`

当前已挂载并登记了 `id` 的全部实例，随注册表增删自动更新。没给 `id` 的实例不会出现在这里。用于做实例切换器，或在开发期确认某个 id 是否真的登记上了。

```ts
import type { SigmaContext } from '@movk/sigma'
```


## Sitemap

See the full [sitemap](https://sigma.mhaibaraai.cn/sitemap.md) for all pages.