Vuex中内置Logger插件的源码分析

1、使用Logger插件

import createLogger from 'vuex/dist/logger'

const store = new Vuex.Store({
   
  plugins: [createLogger()]
})

2、基本实现

一、在Store的构造器中定义了 this._subscribers = [] ，提供subscribe 方法收集订阅者，之后在commit mutation时， 遍历其._subscribers执行订阅者的回调方法。

  subscribe (fn) {
   
    return genericSubscribe(fn, this._subscribers)
  }
  function genericSubscribe (fn, subs) {
   
	  if (subs.indexOf(fn) < 0) {
   
	    subs.push(fn)
	  }
	  return () => {
   
	    const i = subs.indexOf(fn)
	    if (i > -1) {
   
	      subs.