(mutation: P, stateBefore: S, stateAfter: S) => boolean; transformer?: (state: S) => any; mutationTransformer?:
(mutation: P) => any; } diff --git a/docs/en/plugins.md b/docs/en/plugins.md index 3dfa04299..4d7e64a37 100644 --- a/docs/en/plugins.md +++ b/docs/en/plugins.md @@ -102,6 +102,11 @@ The `createLogger` function takes a few options: ``` js const logger = createLogger({ collapsed: false, // auto-expand logged mutations + filter (mutation, stateBefore, stateAfter) { + // returns true if a mutation should be logged + // `mutation` is a { type, payload } + return mutation.type !== "aBlacklistedMutation" + }, transformer (state) { // transform the state before logging it. // for example return only a specific sub-tree diff --git a/docs/fr/plugins.md b/docs/fr/plugins.md index cba2c94f8..ace4b21dc 100644 --- a/docs/fr/plugins.md +++ b/docs/fr/plugins.md @@ -102,6 +102,11 @@ La fonction `createLogger` prend quelques options : ``` js const logger = createLogger({ collapsed: false, // auto-expand logged mutations + filter (mutation, stateBefore, stateAfter) { + // returns true if a mutation should be logged + // `mutation` is a { type, payload } + return mutation.type !== "aBlacklistedMutation" + }, transformer (state) { // transform the state before logging it. // for example return only a specific sub-tree diff --git a/docs/ja/plugins.md b/docs/ja/plugins.md index d1b9b0627..f1dfa9137 100644 --- a/docs/ja/plugins.md +++ b/docs/ja/plugins.md @@ -102,6 +102,11 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // ログ出力されたミューテーションを自動で展開します + filter (mutation, stateBefore, stateAfter) { + // returns true if a mutation should be logged + // `mutation` is a { type, payload } + return mutation.type !== "aBlacklistedMutation" + }, transformer (state) { // ロギングの前に、状態を変換します // 例えば、特定のサブツリーのみを返します diff --git a/docs/kr/plugins.md b/docs/kr/plugins.md index 495112e8f..9f083dfe5 100644 --- a/docs/kr/plugins.md +++ b/docs/kr/plugins.md @@ -103,6 +103,11 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // 로그를 가지는 변이 자동 확장 + filter (mutation, stateBefore, stateAfter) { + // returns true if a mutation should be logged + // `mutation` is a { type, payload } + return mutation.type !== "aBlacklistedMutation" + }, transformer (state) { // 로깅하기전 상태를 변이 하십시오. // 예를 들어 특정 하위 트리만 반환합니다. diff --git a/docs/ru/plugins.md b/docs/ru/plugins.md index 37fbae0fd..df8ef7456 100644 --- a/docs/ru/plugins.md +++ b/docs/ru/plugins.md @@ -102,6 +102,11 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // автоматически раскрывать залогированные мутации + filter (mutation, stateBefore, stateAfter) { + // returns true if a mutation should be logged + // `mutation` is a { type, payload } + return mutation.type !== "aBlacklistedMutation" + }, transformer (state) { // обработать состояние перед логированием // например, позволяет рассматривать только конкретное поддерево diff --git a/docs/zh-cn/plugins.md b/docs/zh-cn/plugins.md index df1611239..3a261ff27 100644 --- a/docs/zh-cn/plugins.md +++ b/docs/zh-cn/plugins.md @@ -102,6 +102,11 @@ const store = new Vuex.Store({ ``` js const logger = createLogger({ collapsed: false, // 自动展开记录的 mutation + filter (mutation, stateBefore, stateAfter) { + // returns true if a mutation should be logged + // `mutation` is a { type, payload } + return mutation.type !== "aBlacklistedMutation" + }, transformer (state) { // 在开始记录之前转换状态 // 例如，只返回指定的子树 diff --git a/src/plugins/logger.js b/src/plugins/logger.js index 1bef55cc7..4dcc003c1 100644 --- a/src/plugins/logger.js +++ b/src/plugins/logger.js @@ -4,6 +4,7 @@ import { deepCopy } from '../util' export default function createLogger ({ collapsed = true, + filter = (mutation, stateBefore, stateAfter) => true, transformer = state => state, mutationTransformer = mut => mut } = {}) { @@ -15,29 +16,32 @@ export default function createLogger ({ return } const nextState = deepCopy(state) - 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 - ? console.groupCollapsed - : console.group - - // render - try { - startMessage.call(console, message) - } catch (e) { - console.log(message) - } - - console.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState)) - console.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation) - console.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState)) - try { - console.groupEnd() - } catch (e) { - console.log('—— log end ——') + 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 + ? console.groupCollapsed + : console.group + + // render + try { + startMessage.call(console, message) + } catch (e) { + console.log(message) + } + + console.log('%c prev state', 'color: #9E9E9E; font-weight: bold', transformer(prevState)) + console.log('%c mutation', 'color: #03A9F4; font-weight: bold', formattedMutation) + console.log('%c next state', 'color: #4CAF50; font-weight: bold', transformer(nextState)) + + try { + console.groupEnd() + } catch (e) { + console.log('—— log end ——') + } } prevState = nextState