How to hide next state and previous state in vuex logs?

user_5120089 0
Viewed 137

Here is how I initialize vuex:

Vue.use(Vuex);
const store = new Vuex.Store({
  plugins: [createLogger({logger: console, collapsed: true})],
  strict: true,
  state: state,
  getters: getters,
  mutations: mutations,
  actions: actions,
});
Vue.prototype.$store = store;
export default store;

The logs I get are like:

'mutation ADD_VIDEO_CREDIT @ 15:53:13.903'

'%c prev state' 'color: #9E9E9E; font-weight: bold' { profile: // a huge pile of text

'%c mutation' 'color: #03A9F4; font-weight: bold' { type: 'ADD_CREDIT', payload: {credit: 4} }

'%c next state' 'color: #4CAF50; font-weight: bold' { profile: // another huge pile of text

In my dreams I would like to only get:

type: 'ADD_CREDIT', payload: {credit: 4}

What is the closesd I cat get to that?

vuex vue.js javascript
1 Answers

The createLogger function takes few functions, you can use the filter function to override the actual mutation results to print in console in the required format

Vue.use(Vuex);
const store = new Vuex.Store({
  plugins: [
   createLogger({
  logger: console,
  collapsed: true,
  filter (mutation, stateBefore, stateAfter) {
    console.log(mutation);
    return false;
  },
}),
],
  strict: true,
  state: state,
  getters: getters,
  mutations: mutations,
  actions: actions,
});
Vue.prototype.$store = store;
export default store;
user_105557850
Related