vuex使用logger的日志功能

vuex是一个比较好用的数据流管理库，可以用统一的流程来处理状态数据，但是，也正是因为这些流程，我们需要打一些log来观察流程是否会出现问题，具体方法如下：

Vuex 自带一个日志插件用于一般的调试，首先需要引入这个文件

import createLogger from 'vuex/dist/logger'
const debug = process.env.NODE_ENV !== 'production';

然后挂载到vuex中

export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions,
	plugins: debug ? [createLogger()] : []
})

完整代码如下：

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import  state from './state';
import  mutations from './mutations';
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production';
export default new Vuex.Store({
	state,
	getters,
	mutations,
	actions,
	plugins: debug ? [createLogger()] : []
})

然后在控制台就可以看到这些信息了

prev sate 代表之前的数据，mutations代表经过vuex中的mutations中方法修改后的数据，可以通过这个logger插件可以明细的看到数据的变化

createLogger 函数有几个配置项：

const logger = createLogger({
  collapsed: false, // 自动展开记录的 mutation
  filter (mutation, stateBefore, stateAfter) {
    // 若 mutation 需要被记录，就让它返回 true 即可
    // 顺便，`mutation` 是个 { type, payload } 对象
    return mutation.type !== "aBlacklistedMutation"
  },
  transformer (state) {
    // 在开始记录之前转换状态
    // 例如，只返回指定的子树
    return state.subTree
  },
  mutationTransformer (mutation) {
    // mutation 按照 { type, payload } 格式记录
    // 我们可以按任意方式格式化
    return mutation.type
  },
  logger: console, // 自定义 console 实现，默认为 `console`
})