Why Vuex Has Mutations AND Actions
摘要： 📌 三、总结：为什么这么设计？ Devtools 的硬约束： 强制同步 Mutation 是 Vuex 实现可靠的状态快照记录和时间旅行调试的基石。 没有了它，复杂应用的调试将极其困难。 架构清晰度： Mutation 纯同步改状态，Action 管逻辑和异步。 这种明确的分工让代码结构更清晰，职责更单一，提高了可维护性和可测试性。状态的改变点（commit）集中在 Mutation，行为（dispatch）发生在 Action。 拥抱异步： Action 的异步支持是处理现代前端应用中无处不在的异步操作（尤其是 API）的必然选择。它提供了基于 Promise 的优雅编程模型。
🧬 一、核心区别（表象） | 特性 | Mutation | Action | | --- | --- | --- | | 功能 | 唯一修改状态 (state) 的途径 | 处理业务逻辑（异步、组合操作） | | 同步性 | 必须是同步操作 | 可以包含异步操作 | | 触发方式 | 通过 store.commit(mutationName, payload) | 通过 store.dispatch(actionName, payload) | | 调试 | Devtools 中可记录每次状态变更（时间旅...
30岁了，现在开始努力还算晚吗？
30 岁了， 现在开始努力，晚吗？ 这让我想起，非洲经济女学家 Dambisa Moyo 的《dead aid》书中的结束语： “The best time to plant a tree is 20 years ago. The second-best time is now.” “最好的种一棵树的时间是 20 年前，其次是现在”，启示我们不要被年龄和时间束缚，临渊羡鱼，不如退而结网，与其哀怨叹气，不如现在就开始行动起来。 网上也有段子，黄忠六十跟刘备，德川家康七十大天下，姜子牙八十为丞相，佘太君百岁挂帅，孙悟空五百多岁西天取经，白素贞一千多年下山谈恋爱，以戏谑的方式讲述了大器晚...
AI Agent 开发 01｜先弄清楚，谁在执行任务
摘要： 从一次真实工具调用开始，理解模型、程序、状态和上下文各自负责什么，明确 Agent 的完成标准。
让模型写一个待办应用，它可以给你一整页代码。代码出现在聊天框里，项目目录里却可能什么都没有。要跨过这一步，应用需要接收模型提出的操作，执行文件写入，再把结果送回去。 Agent 开发可以从这件小事开始理解。模型负责判断接下来做什么，程序负责让操作发生。一次操作带来的结果，会影响模型下一次的判断。 这套系列根据冴羽《AI Agent 开发实战》的学习整理稿重新编排，保留原教程来源，并补充工程上的判断。阅读时有 JavaScript 基础就够了。我们会逐步设计一个项目知识库助手，让它读取资料、回答问题、保留引用，最后接上网页。文中的演示数据和项目需求均用于学习。 把一次任务拆开看 用...
AI Agent 开发 02｜用一个离线例子看清执行循环
摘要： 用无需密钥的 Node.js 离线例子跑通请求、执行与回传，并检查失败路径和轮数上限。
先把模型换成一段确定的程序，Agent 的执行过程就很容易观察。我们让它先请求查询项目的启动命令，收到工具结果以后再回答。这个例子不会调用真实模型，也没有语言理解能力，用来检查程序有没有把几个步骤正确连起来。 准备一个支持 ES 模块和 Array.prototype.at() 的 Node.js 环境。新建 agent-loop.mjs，保存下面的完整代码。 import { pathToFileURL } from "node:url"; const tools = new Map([ ["lookup_command", async (arg...
AI Agent 开发 03｜任务走不动时，该继续试还是重新规划
摘要： 结合任务状态理解 ReAct 与计划执行，说明何时重规划，以及怎样用外部证据检查结果。
循环能运行以后，下一个问题很实际。每轮都让模型自由决定，会不会一直绕圈？先列一份计划，又能不能应付做到一半才发现的新问题？ ReAct 和 Plan-and-Execute 给出了两种组织办法。前者随着工具反馈决定行动，后者显式保存计划，再根据执行结果调整。它们都需要真实观察，也都需要停止条件。 先观察，再决定下一步 原教程用修复程序一类任务解释 ReAct。开始时只知道页面有问题，具体原因还没有定位。先读报错，找到组件，再检查初始化过程。每次行动所需的信息，来自上一次结果。 把这个方式用到知识库助手，过程也一样。用户问登录以后为什么会跳回首页，助手先检索登录文档。如果文档只说明...
AI Agent 开发 04｜把工具写清楚，助手才有办法把事做完
摘要： 从 Mini Cursor 的四种工具入手，设计参数、权限、命令执行、错误结果和真实完成状态。
同样是读取文件，一个工具只返回“失败”，另一个能说明文件不存在、请求路径是什么、是否可以换一个位置继续查，后面的执行会差很多。工具输出决定了模型接下来有多少依据。 原教程用 Mini Cursor 说明这件事。最小代码助手可以从列目录、读文件、写文件和运行命令开始。四种能力已经能组成“查看项目、修改代码、执行检查、根据结果继续修正”的过程。 知识库助手可以先缩小范围，只提供列资料目录和读取资料。等确实需要编辑文件，再加入写入能力。每增加一种工具，都应该知道它会改变什么。 工具说明要让模型能作选择 工具通常需要名称、描述、输入结构和执行函数。名称用于识别，描述帮助模型判断何时调用，...
AI Agent 开发 05｜选框架之前，先看你准备省掉哪部分代码
摘要： 按实际需求理解 Mastra、LangChain 与工作流，重点检查步骤之间的数据契约和调试证据。
手写一次循环以后，框架的作用会具体很多。模型接入、工具消息、流式返回和状态保存都需要维护。业务增加以后，把这些通用部分反复写一遍，会占掉不少时间。 选框架可以从当前缺口出发。知识库助手眼下需要的是接入模型、定义检索工具，以及把答案和引用返回给页面。先把这条路径跑通，再看恢复执行或复杂分支是否真的需要加入。 几个名字各自负责什么 原教程同时介绍了 Mastra 和 LangChain.js。Mastra 把 Agent、Workflow、Memory 和调试能力放在同一套 TypeScript 开发体验中。LangChain 提供模型、工具和 Agent 的组合接口，需要更细的状态控...
AI Agent 开发 06｜多轮对话能接上，靠的是怎样保存和取回信息
摘要： 区分消息历史、观察摘要、工作记忆与旧话题召回，用会话隔离和重启测试验证记忆。
第一轮告诉助手项目用 pnpm，第二轮问“那我应该运行什么命令”，应用得把前面的信息带回请求。只发送第二句话，模型就缺少“那”指向的内容。 对话记忆由应用保存、选择，再提供给模型。弄清这三个动作，才知道信息为什么会遗失，或者为什么会出现在不该出现的会话里。 最近消息先解决眼前的追问 最直接的做法是保存消息历史，每次请求带上最近一部分。当前会话连续讨论同一个项目时，这已经很有用。 历史继续增长以后，输入会变长，也会夹进已经结束的话题。此时需要决定保留哪些原文，哪些内容可以压缩。这个决定应该根据后续任务需要什么来做。 知识库助手刚读过一个接口定义，用户接着问其中某个字段，可以保留对...
AI Agent 开发 07｜一个工具接到多个助手里，MCP 帮你统一哪部分工作
摘要： 顺着文档搜索理解 MCP 的能力发现、调用和传输，并明确本文使用的协议版本范围。
项目已经有一个查文档的函数。接进第一个助手时，需要写工具说明和调用逻辑；换到另一个应用，可能又要适配一遍。MCP 为这类连接提供共同协议，让客户端能发现服务提供的能力，再按约定调用。 执行任务的循环仍由应用组织。模型提出工具请求以后，程序决定是否执行，MCP 客户端负责与服务通信，服务返回真实结果。这几个职责分别看清，接入出了问题才容易定位。 顺着一次查询走一遍 以 search_project_docs 为例，服务声明工具名称、说明和输入 schema。客户端取得这些定义，把适合提供给模型的工具注册进去。 模型决定查询开发指南时，Agent 程序先验证这次调用，再通过客户端...
AI Agent 开发 08｜资料里明明有答案，RAG 为什么还会答错
摘要： 分开索引与查询，理解 embedding、topK、混合检索和引用，沿真实数据排查 RAG 错误。
知识库助手要回答项目自己的问题，得先找到项目资料。RAG 把相关内容取出来，放进模型当前请求，再让模型依据它生成回答。 这条过程没有改变模型参数。资料更新以后，主要工作是同步来源和索引，再验证查询结果。模型能否答对，还取决于读取、切分、检索和生成是否都处理正确。 建索引与回答问题分开运行 索引任务先读取原始文件，整理成统一文档，切成片段，编码并保存。查询服务则接收问题，在已有资料中搜索，再组织上下文。 索引任务 资料 → 读取与清理 → 分块 → 编码 → 保存 查询服务 问题 → 检索已有数据 → 组织证据 → 生成回答 教程演示有时把两条过程写在同...