diff --git a/dist/logger.d.ts b/dist/logger.d.ts
index ec52e727e..5c7351d8c 100644
--- a/dist/logger.d.ts
+++ b/dist/logger.d.ts
@@ -10,6 +10,10 @@ export interface LoggerOption {
filter?:
(mutation: P, stateBefore: S, stateAfter: S) => boolean; transformer?: (state: S) => any; mutationTransformer?:
(mutation: P) => any; + actionFilter?:
(action: P, state: S) => boolean; + actionTransformer?:
(action: P) => any;
+ logActions?: boolean;
+ logMutations?: boolean;
}
export default function createLogger(option?: LoggerOption): Plugin;
diff --git a/docs/guide/plugins.md b/docs/guide/plugins.md
index fe4939c0a..c89c1bfb3 100644
--- a/docs/guide/plugins.md
+++ b/docs/guide/plugins.md
@@ -109,6 +109,11 @@ const logger = createLogger({
// `mutation` is a `{ type, payload }`
return mutation.type !== "aBlacklistedMutation"
},
+ actionFilter (action, state) {
+ // same as `filter` but for actions
+ // `action` is a `{ type, payload }`
+ return action.type !== "aBlacklistedAction"
+ },
transformer (state) {
// transform the state before logging it.
// for example return only a specific sub-tree
@@ -119,6 +124,12 @@ const logger = createLogger({
// we can format it any way we want.
return mutation.type
},
+ actionTransformer (action) {
+ // Same as mutationTransformer but for actions
+ return action.type
+ },
+ logActions: true, // Log Actions
+ logMutations: true, // Log mutations
logger: console, // implementation of the `console` API, default `console`
})
```
diff --git a/src/plugins/devtool.js b/src/plugins/devtool.js
index dc6b04f73..d1b533fbf 100644
--- a/src/plugins/devtool.js
+++ b/src/plugins/devtool.js
@@ -19,4 +19,8 @@ export default function devtoolPlugin (store) {
store.subscribe((mutation, state) => {
devtoolHook.emit('vuex:mutation', mutation, state)
})
+
+ store.subscribeAction((action, state) => {
+ devtoolHook.emit('vuex:action', action, state)
+ })
}
diff --git a/src/plugins/logger.js b/src/plugins/logger.js
index cadab8b29..ccf2b6537 100644
--- a/src/plugins/logger.js
+++ b/src/plugins/logger.js
@@ -7,49 +7,81 @@ export default function createLogger ({
filter = (mutation, stateBefore, stateAfter) => true,
transformer = state => state,
mutationTransformer = mut => mut,
+ actionFilter = (action, state) => true,
+ actionTransformer = act => act,
+ logActions = true,
+ logMutations = true,
logger = console
} = {}) {
return store => {
let prevState = deepCopy(store.state)
- store.subscribe((mutation, state) => {
- if (typeof logger === 'undefined') {
- return
- }
- const nextState = deepCopy(state)
-
- if (filter(mutation, prevState, nextState)) {
- const time = new Date()
- const formattedTime = ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
- const formattedMutation = mutationTransformer(mutation)
- const message = `mutation ${mutation.type}${formattedTime}`
- const startMessage = collapsed
- ? logger.groupCollapsed
- : logger.group
-
- // render
- try {
- startMessage.call(logger, message)
- } catch (e) {
- console.log(message)
+ if (typeof logger === 'undefined') {
+ return
+ }
+
+ if (logMutations) {
+ store.subscribe((mutation, state) => {
+ const nextState = deepCopy(state)
+
+ if (filter(mutation, prevState, nextState)) {
+ const formattedTime = getFormattedTime()
+ const formattedMutation = mutationTransformer(mutation)
+ const message = `mutation ${mutation.type}${formattedTime}`
+
+ startMessage(logger, message, collapsed)
+ logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
+ logger.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
+ logger.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))
+ endMessage(logger)
}
- logger.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState))
- logger.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation)
- logger.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState))
+ prevState = nextState
+ })
+ }
- try {
- logger.groupEnd()
- } catch (e) {
- logger.log('—— log end ——')
+ if (logActions) {
+ store.subscribeAction((action, state) => {
+ if (actionFilter(action, state)) {
+ const formattedTime = getFormattedTime()
+ const formattedAction = actionTransformer(action)
+ const message = `action ${action.type}${formattedTime}`
+
+ startMessage(logger, message, collapsed)
+ logger.log('%c action', 'color: #03A9F4; font-weight: bold', formattedAction)
+ endMessage(logger)
}
- }
+ })
+ }
+ }
+}
- prevState = nextState
- })
+function startMessage (logger, message, collapsed) {
+ const startMessage = collapsed
+ ? logger.groupCollapsed
+ : logger.group
+
+ // render
+ try {
+ startMessage.call(logger, message)
+ } catch (e) {
+ logger.log(message)
+ }
+}
+
+function endMessage (logger) {
+ try {
+ logger.groupEnd()
+ } catch (e) {
+ logger.log('—— log end ——')
}
}
+function getFormattedTime () {
+ const time = new Date()
+ return ` @ ${pad(time.getHours(), 2)}:${pad(time.getMinutes(), 2)}:${pad(time.getSeconds(), 2)}.${pad(time.getMilliseconds(), 3)}`
+}
+
function repeat (str, times) {
return (new Array(times + 1)).join(str)
}