vuex3源码注释系列 /src/plugins/logger.js

望月寄明

已于 2022-03-16 20:18:58 修改

阅读量388

点赞数

CC 4.0 BY-SA版权

分类专栏： vuex3源码解读文章标签： javascript 前端开发语言

于 2022-03-16 11:24:39 首次发布

本文链接：https://blog.csdn.net/qq_36723759/article/details/123522096

本文详细解读 Vuex3 中的 logger 插件源码，深入理解其工作原理，帮助前端开发者更好地掌握状态管理工具 Vuex 的内部实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// Credits: borrowed code from fcomb/redux-logger

import {
   
    deepCopy } from "../util";

/**
 * 关于 createLogger 的使用： ===> 以插件的方式进行使用。用于打印 vuex 使用过程中的消息日志。
 * import { createLogger } from 'vuex';
   const store = new Vuex.store({
        state: {},
        mutations: {},
        actions: {},
        plugins: process.env.NODE_DEV !== 'production' ? [createLogger()]:[],
        strict: true
    });
    export default store;
 * 
 */
export default function createLogger({
   
   
  //用于判断使用 console.group ，还是使用 console.grounpCollased 来进行分组打印消息。
  collapsed = true,
  //用于设置 commit 的过滤条件，该函数返回false，则表示不打一个当前commit行为的日志消息。
  filter = (mutation, stateBefore, stateAfter) => true,
  //将 state 数据转换成自定义的格式。
  transformer = (state) => state,
  //将 mutation 数据 { type, payload } 转化为自定义的格式。
  mutationTransformer = (mut) => mut,
  //用于设置 dispatch 的过滤条件，该函数返回false，则表示不打一个当前dispatch行为的日志消息。
  actionFilter = (action, state) => true,
  //将 action 数据 { type, payload } 转化为自定义的格式。
  actionTransformer = (act) => act,
  //是否要开启打印所有 commit 行为的日志消息。
  logMutations = true,
  //是否要开启打印所有 dispatch 行为的日志消息。
  logActions = true,
  //指定打印日志的对象。默认为 console
  logger = console,
} = {
   
   }) {
   
   
  //在 store.js 的 constructor() 方法中调用 plugins.forEach((plugin) => plugin(this)); 传入的参数 this 就是 store。
  //也就是说，下面的这个函数，是在 store 初始化时就被调用了的。
  return (store) => {
   
   
    //深度拷贝一份 store.state 对象， 这个state是 store._vm 实例 data 中的state属性数据。
    let prevState = deepCopy(store