Vuex 插件机制深度指南从订阅 Mutation 到内置 Logger 的完整实战【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex导读Vuex 的插件Plugin是官方提供的一种横切cross-cutting扩展机制Store 在创建时会接受plugins选项每个插件本质上是一个接收 store 作为唯一参数的普通函数可以在每次 mutation 提交后获得钩子hook回调。通过插件你可以实现状态持久化、WebSocket 数据同步、日志记录、撤销/重放等能力而无需侵入业务代码。读完本文你将掌握 Vuex 插件的定义与注册方式、store.subscribe与store.subscribeAction的订阅原理、状态快照的正确用法以及官方内置createLogger的完整配置项与源码实现。一、插件是什么一个接收 store 的函数Vuex 的 Store 构造函数接受一个plugins选项其类型在 types/index.d.ts 中定义为plugins?: PluginS[]; export type PluginS (store: StoreS) any;即一个插件就是一个接收 store 作为唯一参数的函数。最简单的插件长这样const myPlugin (store) { // 当 store 初始化完成后调用插件注册时 store.subscribe((mutation, state) { // 每次 mutation 之后调用 // mutation 的格式为 { type, payload } }) }插件通过plugins选项挂载到 store 上const store createStore({ // ... plugins: [myPlugin] })底层实现插件何时被调用从源码 src/store.js 可以看到插件是在 Store 构造函数末尾被逐个执行的// apply plugins plugins.forEach(plugin plugin(this))结合 src/store.js 的完整构造流程可以确认调用时机解析plugins、strict、devtools选项初始化内部_actions、_mutations、_subscribers、_actionSubscribers等容器installModule递归注册所有模块的 mutation / action / getterresetStoreState建立响应式 state 与 computed getters最后执行plugins.forEach(plugin plugin(this))。因此插件函数被调用时store 已经完全初始化你可以安全地读取store.state、store.getters并订阅后续的 mutation 与 action。官方类型定义也印证了这一点——插件只接收 store 一个参数而createStore会通过new Store(options)完成上述全部流程见 src/store.js。二、在插件中提交 Mutation同步外部数据源与组件中的约束一致插件不允许直接修改 state只能通过提交 mutation 来触发变更。这让插件可以安全地把外部数据源同步进 store。官方文档给出的经典场景是 WebSocket插件监听 socket 事件并提交 mutation同时订阅 mutation 把本地变更回写到远端。export default function createWebSocketPlugin (socket) { return (store) { // 远端数据到达 - 提交 mutation 更新本地状态 socket.on(data, data { store.commit(receiveData, data) }) // 本地 mutation 发生 - 把变更回推给远端 store.subscribe(mutation { if (mutation.type UPDATE_DATA) { socket.emit(update, mutation.payload) } }) } }使用方式与普通插件完全一致const plugin createWebSocketPlugin(socket) const store createStore({ state, mutations, plugins: [plugin] })注意这里的createWebSocketPlugin是一个高阶函数外层函数负责接收并闭包捕获 socket 连接内层函数才是真正的插件函数因此plugins数组里放的是createWebSocketPlugin(socket)的返回值而不是函数本身。这种“工厂函数 返回插件函数”的写法是 Vuex 插件的标准模式。提交 mutation 的合法路径从源码看store.commit在 src/store.js 中会通过unifyObjectStyle归一化对象风格或字符串风格的参数按type在this._mutations[type]中查找 handler 列表在_withCommit包裹下执行所有 mutation handler保证 strict 模式下合法执行完毕后通知所有订阅者sub(mutation, this.state)。也就是说插件里store.commit(...)与组件里调用commit走的是同一条链路任何合法的 mutation 提交都会触发插件订阅。如果 store 开启了strict模式src/store-util.js 通过watch(..., { deep: true, flush: sync })监听 state 变化在 mutation handler 之外直接改 state 会抛出[vuex] do not mutate vuex store state outside mutation handlers.断言错误——这正是插件“只能通过提交 mutation 改变状态”这条规则的底层保障。三、状态快照比较 mutation 前后的 state有时插件需要拿到 state 的“快照”并比较 mutation 前后的差异例如撤销/重放、变更追踪。由于 mutation 是同步执行的Vuex 保证subscribe回调在 mutation 提交完成后立即触发此时可以直接深拷贝得到前后两个状态const myPluginWithSnapshot (store) { let prevState _.cloneDeep(store.state) store.subscribe((mutation, state) { let nextState _.cloneDeep(state) // 在这里比较 prevState 与 nextState ... // 保存本次状态供下一次 mutation 比较 prevState nextState }) }关键注意事项必须深拷贝Vuex 的 state 是响应式对象store.state返回的是同一份引用直接赋值prevState store.state拿不到“旧值”。必须使用_.cloneDeep如 lodash或自定义深拷贝函数做快照隔离。只用于开发环境深拷贝整个 state 树有可观的性能开销快照型插件应仅在开发阶段启用。官方推荐的开发/生产分离写法是借助构建工具的process.env.NODE_ENV替换const store createStore({ // ... plugins: process.env.NODE_ENV ! production ? [myPluginWithSnapshot] : [] })在 webpack 中需要通过 DefinePlugin 把process.env.NODE_ENV替换为productionBrowserify 则对应 envify这样最终的产物里process.env.NODE_ENV ! production会被常量折叠为false快照插件就被干净地剔除掉了。快照在仓库中的实际应用本仓库的 examples/classic/todomvc/store/plugins.js 正是这种模式的现成范例——它用process.env.NODE_ENV ! production决定是否注入createLogger()logger 内部也做快照export default process.env.NODE_ENV ! production ? [createLogger(), localStoragePlugin] : [localStoragePlugin]而 Vuex 自带的状态深拷贝工具位于 src/util.jsdeepCopy递归复制对象的同时维护一个cache数组遇到循环引用时直接返回缓存中的副本避免无限递归——这也是createLogger内部使用的深拷贝实现见 src/plugins/logger.js。四、内置 Logger 插件开箱即用的调试工具Vuex 官方自带一个日志插件createLogger用于常见的调试场景import { createLogger } from vuex const store createStore({ plugins: [createLogger()] })createLogger在 src/index.js 中随vuex主入口导出因此可以通过import { createLogger } from vuex直接引入。完整配置项createLogger接受一个可选配置对象默认值以仓库源码 src/plugins/logger.js 为准配置项默认值说明collapsedtrue是否折叠groupCollapsed日志分组设为false则自动展开filter(mutation, stateBefore, stateAfter)恒返回true返回true时才记录该 mutationmutation为{ type, payload }transformer(state)恒等函数state state记录前对 state 做转换例如只输出某个子树mutationTransformer(mutation)恒等函数对{ type, payload }格式的 mutation 做格式化actionFilter(action, state)恒等返回true与filter相同但作用于 actionactionTransformer(action)恒等函数与mutationTransformer相同但作用于 actionlogMutationstrue是否记录 mutationlogActionstrue是否记录 actionloggerconsole日志输出对象需实现consoleAPI完整的调用示例const logger createLogger({ collapsed: false, // 自动展开日志分组 filter (mutation, stateBefore, stateAfter) { // 返回 true 则记录该 mutation return mutation.type ! aBlocklistedMutation }, actionFilter (action, state) { // 与 filter 相同但作用于 action return action.type ! aBlocklistedAction }, transformer (state) { // 记录前转换 state例如只返回某个子树 return state.subTree }, mutationTransformer (mutation) { // mutation 以 { type, payload } 传入可自由格式化 return mutation.type }, actionTransformer (action) { // 同 mutationTransformer作用于 action return action.type }, logActions: true, // 记录 action logMutations: true, // 记录 mutation logger: console, // 实现 console API 的对象默认 console })源码级实现原理对照 src/plugins/logger.js 可以看到它的核心逻辑快照基线插件返回的函数一开始就对store.state做deepCopy保存在prevState第 17 行订阅 mutationlogMutations开启时调用store.subscribe每次 mutation 后对最新 state 再做deepCopy得到nextState第 24-25 行随后用filter判断是否记录若记录则输出三行带颜色的日志——prev state灰色、mutation蓝色、next state绿色并把nextState作为下一次比较的基线第 39 行订阅 actionlogActions开启时调用store.subscribeAction在 action 派发后通过actionFilter过滤并输出action日志第 43-55 行分组输出startMessage根据collapsed选择logger.groupCollapsed还是logger.group并用try/catch兜底——某些环境下不支持分组 API 时退化为普通logger.log第 59-70 行时间戳getFormattedTime生成 HH:mm:ss.SSS格式的时间戳附在日志标题中第 80-83 行。值得注意的细节createLogger内部做了默认值解构 {}空对象默认参数所以createLogger()无参数调用完全合法同时第 19-21 行在logger未定义如某些精简环境时直接返回空插件函数避免运行时崩溃。测试与类型定义佐证仓库的单元测试 test/unit/store.spec.js 验证了订阅机制的核心行为store.subscribe返回一个unsubscribe函数调用后该订阅者不再收到后续 mutation 通知store.subscribe的订阅者会被传入{ type, payload }形式的 mutation 对象和当前state订阅者在回调中同步调用自己的unsubscribe不会导致迭代器失效src/store.js 对订阅者列表做了.slice()浅拷贝防止迭代期间修改数组。类型层面types/index.d.ts 声明了subscribeAction支持函数或{ before, after, error }对象两种形式createLogger也通过 types/logger.d.ts 提供了完整的类型定义TypeScript 项目可以直接获得配置项的智能提示。五、Logger 的浏览器全局用法除模块化导入外logger 插件还可以通过script标签直接引入此时它会在全局暴露createVuexLogger函数script srchttps://unpkg.com/vuex/script !-- 或单独引入 logger 构建产物 -- script srcpath/to/vuex-logger.js/script script const store new Vuex.Store({ plugins: [createVuexLogger()] }) /script这与仓库 src/plugins/logger.js 中export function createLogger的命名导出对应——UMD/全局构建下导出名即createVuexLogger。需要注意logger 插件内部会对每个 mutation 的 state 做深拷贝快照因此同样只建议在开发环境使用。六、与订阅相关的两个进阶 API理解插件的另一半拼图是 Store 上的订阅 API它们在 src/store.js 中实现插件是它们最主要的消费者store.subscribe(handler)—— 订阅 mutationstore.subscribe((mutation, state) { // mutation: { type, payload } })在 src/store.js 中subscribe通过genericSubscribe把回调压入_subscribers数组并返回取消订阅函数。commit在执行完 mutation handler 后会对订阅者列表做.slice()浅拷贝再逐个通知src/store.js保证订阅者在回调里同步退订时不会破坏遍历。store.subscribeAction(handler)—— 订阅 actionstore.subscribeAction((action, state) { // action: { type, payload } })subscribeAction支持两种传参形式src/store.js// 形式一函数等价于 { before: fn } store.subscribeAction((action, state) {}) // 形式二对象可分别监听 before / after / error 三个时机 store.subscribeAction({ before: (action, state) {}, // action 执行前 after: (action, state) {}, // action 成功 resolve 后 error: (action, state, error) {} // action 抛错时 })dispatch在 src/store.js 中按before → 执行 → after/error的顺序触发这些回调并且 action 是异步的最终以 Promise 形式返回。最佳实践优先订阅 action 而非 mutation虽然官方插件的经典示例以subscribemutation 订阅为主但工程上更推荐使用subscribeActionmutation 在 Vuex 规范中是同步且不应包含副作用的而异步操作网络请求、日志上报、埋点统计等天然属于 action 的职责。通过subscribeAction的before/after/error三时机插件可以精确地在 action 生命周期前后挂接逻辑这比在 mutation 订阅中猜“这个 mutation 由哪个 action 触发”要可靠得多。官方 devtools 插件 src/plugins/devtool.js 正是同时订阅了store.subscribe记录 mutation 时间线与store.subscribeAction的before/after记录 action 起止与耗时可作为组合使用的参考实现。七、实战组合一个可复用的持久化 日志插件将本文要点整合给出一个可直接运行的组合插件示例参考 examples/classic/todomvc/store/plugins.js 的写法// plugins.js import { createLogger } from vuex // 1) 持久化插件订阅 mutation把指定子树写入 localStorage const STORAGE_KEY my-app-state const localStoragePlugin store { store.subscribe((mutation, state) { const snapshot JSON.parse(JSON.stringify({ todos: state.todos, user: state.user })) window.localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot)) }) } // 2) 监控插件基于 subscribeAction 做数据上报 const analyticsPlugin store { store.subscribeAction({ after: (action, state) { // 把关键 action 上报给埋点系统 console.info([analytics], action.type) } }) } // 3) 组合导出开发环境启用日志生产环境只保留必要的插件 export default process.env.NODE_ENV ! production ? [createLogger({ collapsed: true }), localStoragePlugin, analyticsPlugin] : [localStoragePlugin, analyticsPlugin]// store/index.js import { createStore } from vuex import plugins from ./plugins const store createStore({ state: { todos: [], user: null }, mutations: { // 所有状态变更都经由 mutation 完成 }, plugins })要点回顾插件只负责“观察与转发”状态变更一律通过store.commit/ mutation 完成快照型插件含createLogger只在开发环境启用用构建工具的环境变量替换做剔除subscribeAction的before/after/error三时机适合做副作用与埋点subscribe适合做纯状态同步如持久化。八、小结Vuex 插件机制的全部要点可归结为一句话插件 一个接收 store 的函数 对subscribe/subscribeAction钩子的组合利用。本文覆盖了插件的定义方式与注册时机Store 构造流程的最后一个阶段见 src/store.js在插件内通过store.commit同步外部数据源WebSocket 示例用深拷贝实现状态快照并正确区分开发/生产环境process.env.NODE_ENV DefinePlugin/envify内置createLogger的全部 10 个配置项及其源码实现细节src/plugins/logger.jsstore.subscribe/store.subscribeAction的底层原理与取消订阅机制一个集持久化、埋点、日志于一体的组合插件范例。官方文档还提供了更系统的 API 参考docs/api/index.md与插件/中间件相关的最佳实践docs/guide/plugins.md搭配本仓库的 examples 示例与单元测试test/unit/store.spec.js阅读可以完整掌握从“订阅 mutation”到“深度定制 Logger”的整条能力链路。【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Vuex 插件机制深度指南从订阅 Mutation 到内置 Logger 的完整实战【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex导读Vuex 的插件Plugin是官方提供的一种横切cross-cutting扩展机制Store 在创建时会接受plugins选项每个插件本质上是一个接收 store 作为唯一参数的普通函数可以在每次 mutation 提交后获得钩子hook回调。通过插件你可以实现状态持久化、WebSocket 数据同步、日志记录、撤销/重放等能力而无需侵入业务代码。读完本文你将掌握 Vuex 插件的定义与注册方式、store.subscribe与store.subscribeAction的订阅原理、状态快照的正确用法以及官方内置createLogger的完整配置项与源码实现。一、插件是什么一个接收 store 的函数Vuex 的 Store 构造函数接受一个plugins选项其类型在 types/index.d.ts 中定义为plugins?: PluginS[]; export type PluginS (store: StoreS) any;即一个插件就是一个接收 store 作为唯一参数的函数。最简单的插件长这样const myPlugin (store) { // 当 store 初始化完成后调用插件注册时 store.subscribe((mutation, state) { // 每次 mutation 之后调用 // mutation 的格式为 { type, payload } }) }插件通过plugins选项挂载到 store 上const store createStore({ // ... plugins: [myPlugin] })底层实现插件何时被调用从源码 src/store.js 可以看到插件是在 Store 构造函数末尾被逐个执行的// apply plugins plugins.forEach(plugin plugin(this))结合 src/store.js 的完整构造流程可以确认调用时机解析plugins、strict、devtools选项初始化内部_actions、_mutations、_subscribers、_actionSubscribers等容器installModule递归注册所有模块的 mutation / action / getterresetStoreState建立响应式 state 与 computed getters最后执行plugins.forEach(plugin plugin(this))。因此插件函数被调用时store 已经完全初始化你可以安全地读取store.state、store.getters并订阅后续的 mutation 与 action。官方类型定义也印证了这一点——插件只接收 store 一个参数而createStore会通过new Store(options)完成上述全部流程见 src/store.js。二、在插件中提交 Mutation同步外部数据源与组件中的约束一致插件不允许直接修改 state只能通过提交 mutation 来触发变更。这让插件可以安全地把外部数据源同步进 store。官方文档给出的经典场景是 WebSocket插件监听 socket 事件并提交 mutation同时订阅 mutation 把本地变更回写到远端。export default function createWebSocketPlugin (socket) { return (store) { // 远端数据到达 - 提交 mutation 更新本地状态 socket.on(data, data { store.commit(receiveData, data) }) // 本地 mutation 发生 - 把变更回推给远端 store.subscribe(mutation { if (mutation.type UPDATE_DATA) { socket.emit(update, mutation.payload) } }) } }使用方式与普通插件完全一致const plugin createWebSocketPlugin(socket) const store createStore({ state, mutations, plugins: [plugin] })注意这里的createWebSocketPlugin是一个高阶函数外层函数负责接收并闭包捕获 socket 连接内层函数才是真正的插件函数因此plugins数组里放的是createWebSocketPlugin(socket)的返回值而不是函数本身。这种“工厂函数 返回插件函数”的写法是 Vuex 插件的标准模式。提交 mutation 的合法路径从源码看store.commit在 src/store.js 中会通过unifyObjectStyle归一化对象风格或字符串风格的参数按type在this._mutations[type]中查找 handler 列表在_withCommit包裹下执行所有 mutation handler保证 strict 模式下合法执行完毕后通知所有订阅者sub(mutation, this.state)。也就是说插件里store.commit(...)与组件里调用commit走的是同一条链路任何合法的 mutation 提交都会触发插件订阅。如果 store 开启了strict模式src/store-util.js 通过watch(..., { deep: true, flush: sync })监听 state 变化在 mutation handler 之外直接改 state 会抛出[vuex] do not mutate vuex store state outside mutation handlers.断言错误——这正是插件“只能通过提交 mutation 改变状态”这条规则的底层保障。三、状态快照比较 mutation 前后的 state有时插件需要拿到 state 的“快照”并比较 mutation 前后的差异例如撤销/重放、变更追踪。由于 mutation 是同步执行的Vuex 保证subscribe回调在 mutation 提交完成后立即触发此时可以直接深拷贝得到前后两个状态const myPluginWithSnapshot (store) { let prevState _.cloneDeep(store.state) store.subscribe((mutation, state) { let nextState _.cloneDeep(state) // 在这里比较 prevState 与 nextState ... // 保存本次状态供下一次 mutation 比较 prevState nextState }) }关键注意事项必须深拷贝Vuex 的 state 是响应式对象store.state返回的是同一份引用直接赋值prevState store.state拿不到“旧值”。必须使用_.cloneDeep如 lodash或自定义深拷贝函数做快照隔离。只用于开发环境深拷贝整个 state 树有可观的性能开销快照型插件应仅在开发阶段启用。官方推荐的开发/生产分离写法是借助构建工具的process.env.NODE_ENV替换const store createStore({ // ... plugins: process.env.NODE_ENV ! production ? [myPluginWithSnapshot] : [] })在 webpack 中需要通过 DefinePlugin 把process.env.NODE_ENV替换为productionBrowserify 则对应 envify这样最终的产物里process.env.NODE_ENV ! production会被常量折叠为false快照插件就被干净地剔除掉了。快照在仓库中的实际应用本仓库的 examples/classic/todomvc/store/plugins.js 正是这种模式的现成范例——它用process.env.NODE_ENV ! production决定是否注入createLogger()logger 内部也做快照export default process.env.NODE_ENV ! production ? [createLogger(), localStoragePlugin] : [localStoragePlugin]而 Vuex 自带的状态深拷贝工具位于 src/util.jsdeepCopy递归复制对象的同时维护一个cache数组遇到循环引用时直接返回缓存中的副本避免无限递归——这也是createLogger内部使用的深拷贝实现见 src/plugins/logger.js。四、内置 Logger 插件开箱即用的调试工具Vuex 官方自带一个日志插件createLogger用于常见的调试场景import { createLogger } from vuex const store createStore({ plugins: [createLogger()] })createLogger在 src/index.js 中随vuex主入口导出因此可以通过import { createLogger } from vuex直接引入。完整配置项createLogger接受一个可选配置对象默认值以仓库源码 src/plugins/logger.js 为准配置项默认值说明collapsedtrue是否折叠groupCollapsed日志分组设为false则自动展开filter(mutation, stateBefore, stateAfter)恒返回true返回true时才记录该 mutationmutation为{ type, payload }transformer(state)恒等函数state state记录前对 state 做转换例如只输出某个子树mutationTransformer(mutation)恒等函数对{ type, payload }格式的 mutation 做格式化actionFilter(action, state)恒等返回true与filter相同但作用于 actionactionTransformer(action)恒等函数与mutationTransformer相同但作用于 actionlogMutationstrue是否记录 mutationlogActionstrue是否记录 actionloggerconsole日志输出对象需实现consoleAPI完整的调用示例const logger createLogger({ collapsed: false, // 自动展开日志分组 filter (mutation, stateBefore, stateAfter) { // 返回 true 则记录该 mutation return mutation.type ! aBlocklistedMutation }, actionFilter (action, state) { // 与 filter 相同但作用于 action return action.type ! aBlocklistedAction }, transformer (state) { // 记录前转换 state例如只返回某个子树 return state.subTree }, mutationTransformer (mutation) { // mutation 以 { type, payload } 传入可自由格式化 return mutation.type }, actionTransformer (action) { // 同 mutationTransformer作用于 action return action.type }, logActions: true, // 记录 action logMutations: true, // 记录 mutation logger: console, // 实现 console API 的对象默认 console })源码级实现原理对照 src/plugins/logger.js 可以看到它的核心逻辑快照基线插件返回的函数一开始就对store.state做deepCopy保存在prevState第 17 行订阅 mutationlogMutations开启时调用store.subscribe每次 mutation 后对最新 state 再做deepCopy得到nextState第 24-25 行随后用filter判断是否记录若记录则输出三行带颜色的日志——prev state灰色、mutation蓝色、next state绿色并把nextState作为下一次比较的基线第 39 行订阅 actionlogActions开启时调用store.subscribeAction在 action 派发后通过actionFilter过滤并输出action日志第 43-55 行分组输出startMessage根据collapsed选择logger.groupCollapsed还是logger.group并用try/catch兜底——某些环境下不支持分组 API 时退化为普通logger.log第 59-70 行时间戳getFormattedTime生成 HH:mm:ss.SSS格式的时间戳附在日志标题中第 80-83 行。值得注意的细节createLogger内部做了默认值解构 {}空对象默认参数所以createLogger()无参数调用完全合法同时第 19-21 行在logger未定义如某些精简环境时直接返回空插件函数避免运行时崩溃。测试与类型定义佐证仓库的单元测试 test/unit/store.spec.js 验证了订阅机制的核心行为store.subscribe返回一个unsubscribe函数调用后该订阅者不再收到后续 mutation 通知store.subscribe的订阅者会被传入{ type, payload }形式的 mutation 对象和当前state订阅者在回调中同步调用自己的unsubscribe不会导致迭代器失效src/store.js 对订阅者列表做了.slice()浅拷贝防止迭代期间修改数组。类型层面types/index.d.ts 声明了subscribeAction支持函数或{ before, after, error }对象两种形式createLogger也通过 types/logger.d.ts 提供了完整的类型定义TypeScript 项目可以直接获得配置项的智能提示。五、Logger 的浏览器全局用法除模块化导入外logger 插件还可以通过script标签直接引入此时它会在全局暴露createVuexLogger函数script srchttps://unpkg.com/vuex/script !-- 或单独引入 logger 构建产物 -- script srcpath/to/vuex-logger.js/script script const store new Vuex.Store({ plugins: [createVuexLogger()] }) /script这与仓库 src/plugins/logger.js 中export function createLogger的命名导出对应——UMD/全局构建下导出名即createVuexLogger。需要注意logger 插件内部会对每个 mutation 的 state 做深拷贝快照因此同样只建议在开发环境使用。六、与订阅相关的两个进阶 API理解插件的另一半拼图是 Store 上的订阅 API它们在 src/store.js 中实现插件是它们最主要的消费者store.subscribe(handler)—— 订阅 mutationstore.subscribe((mutation, state) { // mutation: { type, payload } })在 src/store.js 中subscribe通过genericSubscribe把回调压入_subscribers数组并返回取消订阅函数。commit在执行完 mutation handler 后会对订阅者列表做.slice()浅拷贝再逐个通知src/store.js保证订阅者在回调里同步退订时不会破坏遍历。store.subscribeAction(handler)—— 订阅 actionstore.subscribeAction((action, state) { // action: { type, payload } })subscribeAction支持两种传参形式src/store.js// 形式一函数等价于 { before: fn } store.subscribeAction((action, state) {}) // 形式二对象可分别监听 before / after / error 三个时机 store.subscribeAction({ before: (action, state) {}, // action 执行前 after: (action, state) {}, // action 成功 resolve 后 error: (action, state, error) {} // action 抛错时 })dispatch在 src/store.js 中按before → 执行 → after/error的顺序触发这些回调并且 action 是异步的最终以 Promise 形式返回。最佳实践优先订阅 action 而非 mutation虽然官方插件的经典示例以subscribemutation 订阅为主但工程上更推荐使用subscribeActionmutation 在 Vuex 规范中是同步且不应包含副作用的而异步操作网络请求、日志上报、埋点统计等天然属于 action 的职责。通过subscribeAction的before/after/error三时机插件可以精确地在 action 生命周期前后挂接逻辑这比在 mutation 订阅中猜“这个 mutation 由哪个 action 触发”要可靠得多。官方 devtools 插件 src/plugins/devtool.js 正是同时订阅了store.subscribe记录 mutation 时间线与store.subscribeAction的before/after记录 action 起止与耗时可作为组合使用的参考实现。七、实战组合一个可复用的持久化 日志插件将本文要点整合给出一个可直接运行的组合插件示例参考 examples/classic/todomvc/store/plugins.js 的写法// plugins.js import { createLogger } from vuex // 1) 持久化插件订阅 mutation把指定子树写入 localStorage const STORAGE_KEY my-app-state const localStoragePlugin store { store.subscribe((mutation, state) { const snapshot JSON.parse(JSON.stringify({ todos: state.todos, user: state.user })) window.localStorage.setItem(STORAGE_KEY, JSON.stringify(snapshot)) }) } // 2) 监控插件基于 subscribeAction 做数据上报 const analyticsPlugin store { store.subscribeAction({ after: (action, state) { // 把关键 action 上报给埋点系统 console.info([analytics], action.type) } }) } // 3) 组合导出开发环境启用日志生产环境只保留必要的插件 export default process.env.NODE_ENV ! production ? [createLogger({ collapsed: true }), localStoragePlugin, analyticsPlugin] : [localStoragePlugin, analyticsPlugin]// store/index.js import { createStore } from vuex import plugins from ./plugins const store createStore({ state: { todos: [], user: null }, mutations: { // 所有状态变更都经由 mutation 完成 }, plugins })要点回顾插件只负责“观察与转发”状态变更一律通过store.commit/ mutation 完成快照型插件含createLogger只在开发环境启用用构建工具的环境变量替换做剔除subscribeAction的before/after/error三时机适合做副作用与埋点subscribe适合做纯状态同步如持久化。八、小结Vuex 插件机制的全部要点可归结为一句话插件 一个接收 store 的函数 对subscribe/subscribeAction钩子的组合利用。本文覆盖了插件的定义方式与注册时机Store 构造流程的最后一个阶段见 src/store.js在插件内通过store.commit同步外部数据源WebSocket 示例用深拷贝实现状态快照并正确区分开发/生产环境process.env.NODE_ENV DefinePlugin/envify内置createLogger的全部 10 个配置项及其源码实现细节src/plugins/logger.jsstore.subscribe/store.subscribeAction的底层原理与取消订阅机制一个集持久化、埋点、日志于一体的组合插件范例。官方文档还提供了更系统的 API 参考docs/api/index.md与插件/中间件相关的最佳实践docs/guide/plugins.md搭配本仓库的 examples 示例与单元测试test/unit/store.spec.js阅读可以完整掌握从“订阅 mutation”到“深度定制 Logger”的整条能力链路。【免费下载链接】vuex️ Centralized State Management for Vue.js.项目地址: https://gitcode.com/gh_mirrors/vu/vuex创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
