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。它还会以相同的键，在 globalThis.__DC_ACTIONS__ 上记录每个 Controller 最近派发的 action。无论是否安装了 Redux DevTools 扩展，它都适用于浏览器、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();

// Last 10 actions, including the ones dispatched while the page loaded
__DC_ACTIONS__.get('Data Client: My App').slice(-10);

这对使用 Chrome DevTools MCP 或 Expo MCP 的 AI 编程助手很有用，它们可以借此以编程方式检查 store 并与之交互。每个 已安装的 DataClientPlugin 都会独立注册，因此支持同一页面上存在多个 应用。当某个名字已被占用时，下一个会注册为 'Data Client: My App (2)'，依此类推；设置 name 可以为每个 store 指定一个易于辨认的键。在没有 window 的环境中（例如服务端渲染时），store 会改为替换掉同名的上一个 store，因为每个请求的 store 永远不会被清理。

action 日志最多保留 maxAge 两倍数量的 action（默认 100 个），并像扩展一样跳过相同的重复 fetch。为了减少内存占用，只有最新的 20 个 action 会保留 args 和 response；更早的 action 只保留 type、key、endpoint、meta 和错误响应。当某个 endpoint 在轮询时，日志对每个键（endpoint 与参数）只保留最后 maxPollingActions 个 action（默认 4 个，即最后两次轮询），这样轮询就不会把其他内容挤出去：

main.ts

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

const managers = getDefaultManagers({
  devToolsManager: { maxPollingActions: 10 },
});

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

调用 cleanup() 时，Controller 及其日志会被移除。生产构建中不存在以上任何内容。

更多信息

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