vue中vuex添加Logger插件

最新推荐文章于 2025-11-02 06:08:10 发布

原创

最新推荐文章于 2025-11-02 06:08:10 发布 · 7.6k 阅读

9 ·

CC 4.0 BY-SA版权

一只努力学习进步的web前端小菜鸟。转载请声明来源。

文章标签：

#vuex #vuex添加日志调试 #vue项目vuex本地开发添加日志调试 #坏丶毛病

本文介绍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变量，通过三目来判断是否要启动插件。