在 Vue.js 的应用中，使用 Vuex 来进行状态管理是非常常见的做法。而 vuex-action-logger 这个 npm 包，就是为开发者提供了一个方便的工具，可以在 Vuex 应用中记录下所有触发的 Actions，便于调试和分析问题。本文将为大家详细介绍如何使用这个 npm 包，并提供示例代码。
安装
在使用前需要先安装 vuex-action-logger 包。可以通过 npm 来进行安装，打开终端并在项目根目录下运行以下命令：
npm install vuex-action-logger --save
一旦安装好了，就可以开始配置和使用了。
配置
首先，在你的 Vuex Store 上导入 vuex-action-logger 依赖。比如：
-- -------------------- ---- ------- ------ - ------------ - ---- --------------------- ------ - ----------- - ---- ------- ----- ----- - ------------- -- ---- ----- -------- ------- --- -- ------ --- ------ ----- ------ - --------------- -- ----- --- ------ ---------- -- --- ----- ------------------------------
这里使用 createStore 来创建一个 Vuex Store，并导入 vuex-action-logger 的 createLogger 方法。接下来，通过 createLogger 方法来创建一个 logger 实例，并调用 applyMiddleware 将 logger 实例添加为中间件，即可完成配置。
使用及说明
现在，vuex-action-logger 已经被添加到了我们的 Vuex 应用中。我们可以在 Action 被触发时，Vuex 会调用 logger 的 methods 来记录 Action 的相关信息。
在默认情况下，logger 会将 Action 的 type、执行时间以及 payload 打印到浏览器的开发工具控制台中。这可以帮助我们快速定位问题，找到产生问题的 Action。
不过，我们也可以通过传递参数来调整 logger 的行为：
filter：仅记录某些特定的 Actions。
const logger = createLogger({ filter: action => action.type.startsWith('app/') });transformer：修改记录的 Action 的格式。
const logger = createLogger({ transformer: action => ({ type: action.type, timestamp: new Date(), payload: JSON.stringify(action.payload) }) });mutationTransformer：修改记录的 Mutation 的格式。
const logger = createLogger({ mutationTransformer: mutation => ({ type: mutation.type, payload: mutation.payload }) });actionFilter 和 mutationFilter：过滤记录的 Actions 和 Mutations。
const logger = createLogger({ actionFilter: (action, state) => state.userID === 1, mutationFilter: (mutation, state) => state.isDebug });logActions 和 logMutations：设置是否记录 Actions 和 Mutations，默认都为 true。
const logger = createLogger({ logActions: false, logMutations: false });
示例代码
这里提供一个简单的示例代码，来展示如何使用 vuex-action-logger：
-- -------------------- ---- -------
------ - ------------ - ---- ---------------------
------ - ----------- - ---- -------
----- ----- - -------------
------ -
------ -
--
---------- -
---------------- -------- -
----------- -- --------
-
--
-------- -
---------------- ------ -- -------- -
------------- -- -
------------------- ---------
-- ------
-
-
---
----- ------ - ---------------
------------------------------
-------------------------------- ----在这个示例代码中，我们首先使用 createStore 创建了一个基本的 Vuex Store，其中有一个 state.count 属性、一个 mutations.increment 方法和一个 actions.incrementAsync 方法。
然后，我们导入 vuex-action-logger，并通过 createLogger 创建了一个 logger 对象。最后，我们通过 applyMiddleware 方法将 logger 注册为 Vuex Middleware。接着，我们以 setTimeout 的形式调用 actions.incrementAsync 触发一个 Action，这个 Action 会在一秒钟内更新 state.count。
现在，执行这个代码，我们会在浏览器的控制台看到这个 log 信息：
app/incrementAsync { payload: 10, from: "@dispatch" }其中，app/incrementAsync 是记录的 Action 的 type，payload: 10 是记录的 Action 的 payload。
这样，我们就可以利用 vuex-action-logger 进行 Vuex 应用的状态管理了。它能够方便地记录所有的 Actions，并提供很多配置方式，帮助我们快速定位问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005587881e8991b448d5b87