DevToolsManager

class DevToolsManager implements Manager

与 Redux DevTools 集成，用于跟踪状态和 action。注意：不支持时间旅行（time-travel）。

在浏览器中安装 Chrome 扩展或 Firefox 扩展即可开始使用。

implements

DevToolsManager 实现了 Manager

constructor(options?, skipLogging?)

options

传给 redux devtools 的参数。

例如，我们可以启用 trace 选项，帮助追踪 action 是从哪里 dispatch 的。

main.ts

import { createApp } from 'vue';
import { DataClientPlugin, getDefaultManagers } from '@data-client/vue';
import App from './App.vue';

const managers = getDefaultManagers({
  devToolsManager: { trace: true },
});

const app = createApp(App);
app.use(DataClientPlugin, { managers });
app.mount('#app');

skipLogging

(action: ActionTypes) => boolean

可以跳过某些 action，使其不记录到浏览器 devtool 中。

默认会跳过进行中的 fetch action

main.ts

import { createApp } from 'vue';
import {
  DataClientPlugin,
  DevToolsManager,
  getDefaultManagers,
} from '@data-client/vue';
import App from './App.vue';

// production builds leave out DevToolsManager
const managers = getDefaultManagers({
  devToolsManager: new DevToolsManager(undefined, () => true),
});

const app = createApp(App);
app.use(DataClientPlugin, { managers });
app.mount('#app');

跳过高频更新

使用 WebSocket 或其他实时数据源时，高频更新可能会让 DevTools 扩展不堪重负。使用 predicate 选项过滤掉特定的 action 类型或 schema：

managers.ts

import { getDefaultManagers, actionTypes } from '@data-client/vue';
import { Ticker } from './resources/Ticker';

const managers = getDefaultManagers({
  devToolsManager: {
    // Increase latency buffer for high-frequency updates
    latency: 1000,
    // Skip WebSocket SET actions for Ticker to reduce log spam
    // (including batched set([Ticker], rows) writes)
    predicate: (state, action) =>
      action.type !== actionTypes.SET ||
      (action.schema !== Ticker && action.schema[0] !== Ticker),
  },
});

以编程方式访问 store

在开发模式下，DevToolsManager 会把每个 Controller 注册到 globalThis.__DC_CONTROLLERS__ 上——这是一个以 devtools 连接名为键的 Map。它适用于浏览器、React Native 和 Node。

Browser DevTools console

// List all registered providers
__DC_CONTROLLERS__.keys();

// Get state from the first provider
__DC_CONTROLLERS__.values().next().value.getState();

// Get state by name
__DC_CONTROLLERS__.get('Data Client: My App').getState();

这对使用 Chrome DevTools MCP 或 Expo MCP 的 AI 编程助手很有用，它们可以借此以编程方式检查 store 并与之交互。每个 已安装的 DataClientPlugin 都会独立注册，因此完全支持同一页面上存在多个 应用。

调用 cleanup() 时，Controller 会从该 map 中移除。

更多信息

使用这个 Manager 可以在浏览器中进行调试和 store 检查。