vue中vuex添加Logger插件

vue中的vuex是一个全局的公共仓库，用来保存我们各个组件共用的一些数据

但是我们在像vuex通过mutations保存数据时，并不知道数据变更的情况，除非我们在需要的组件中监听对应的vuex数据。

当然了，万物都有解决方案，vuex提供了一种插件机制，其中内置了一种logger插件。

作用如下：Vuex 自带一个日志插件用于一般的调试，生成状态快照，对比出改变前后不同的值。

注：logger 插件会生成状态快照，所以仅在开发环境使用

来看下最简单的使用方案：（index.js）

import Vue from "vue";
import Vuex from "vuex";
import createLogger from "vuex/dist/logger"; // 修改日志
import state from "./state";
import * as actions from "./actions";
import * as mutations from "./mutations";

Vue.use(Vuex);

const debug = process.env.NODE_ENV !== "production"; // 开发环境中为true，否则为false

export default new Vuex.Store({
    state,
    actions,
    mutations,
    plugins: debug ? [createLogger()] : [] // 开发环境下显示vuex的状态修改
});

因为该插件只是在开发环境下使用，这里我们定义变量来判断是开发环境还是生产环境。

然后通过plugins变量，通过三目来判断是否要启动插件。

image

当我们通过mutations保存数据的时候，会显示当前执行的mutations方法，这里的savePath就是其中的一个方法，prev会列出state中所有执行此方法前的值，mutation中会列出当前方法以及传递的参数，next会列出state中执行此方法后的值。

这样我们在日常开发中就可以作调试。

当然了，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`
})

以上就是简单的实现vuex本地开发日志，方便调试，如果需要进一步的实现，可以参考下vuex官网

附上地址：vuex插件官网地址

如有问题，请指出，接收批评。