Vuex source code analysis five

createLogger

// dev environment triggers createLogger
export default function createLogger({collapsed = true,filter = (mutation,stateBefore,stateAfter) =>true,transformer = state => state,mutationTransformer = mut => mut,actionFilter = (action,state) =>true,actionTransformer = act => act,logMutations = true,logActions = true,logger = console} = {}){
  return store= > {
    // Get the current state
    let prevState = deepCopy(store.state)
    // Check whether logger exists
    if(typeof logger === 'undefined') {return 
    }
    if(logMutations){
      // Listen for all mutations
      store.subscribe((mutation,state) = > {
        // Get the state at this point
        const nextState = deepCopy(state)
        // the dev environment defaults to true or does not pass arguments to true
        if(filter(mutation,prevState,nextState)){
          // Get the current formatting time
          const formattedTime = getFormattedTime()
          // format mutation
          const formattedMutation = mutationTransformer(mutation)
          const message = `mutation ${mutation.type}${formattedTime}`
          // Start logging
          startMessage(logger,message,collapsed)
          / / record prevState
          logger.log('%c prev state'.'color:#9E9E9E; font-weight:bold',transformer(prevState))
          // Records the mutation of the current operation
          logger.log('%c mutation'.'color:#03A9F4; font-weight:bold',formattedMutation)
          // Record the current state
          logger.log('%c next state'.'color:#4CAF50; font-weight:bold',transformer(nextState))
          // End the mutation log
          endMessage(logger)
        }
        // Listen to end, replace state
        prevState = nextState
      })
    }
    if(logActions){
      store.subscribeAction((action,state) = >{
        if(actionFilter(action,state)){
          // Action does not directly operate state
          // Record the action time
          const formattedTime = getFormattedTime()
          // Format the action
          const formattedAction = actionTransformer(action)
          const message = `action ${action.type}${formattedTime}`
          // Start action log
          startMessage(logger,message,collapse)
          logger.log('%c action'.'color:#03A9F4; font-weight:bold',formattedAction)
          // End the action log
          endMessage(logger)
        }
      })
    }
  }

}
Copy the code