title: Unfamiliar call a function which is in square bracket
body: <p>I'm a fresh man in Javascript and vue.js. Recently, I began to use Vue to build a management system of our company, so I read some code from internet and learn how to use it.
  Here are fragment of code which I can't understand. How could I define a function in square bracket?</p>
  
  <p>The code is use for vuex.</p>
  
  <pre><code>//mutation-types.js
  export const ADD_TOTAL_TIME = 'ADD_TOTAL_TIME'
  export const DEC_TOTAL_TIME = 'DEC_TOTAL_TIME'
  export const SAVE_PLAN = 'SAVE_PLAN'
  export const DELETE_PLAN = 'DELETE_PLAN'
  
  //mutation.js
  import * as types from './mutation-types'
  export default {
    [types.ADD_TOTAL_TIME] (state, time) {
      state.totalTime = state.totalTime + time
    },
    [types.DEC_TOTAL_TIME] (state, time) {
      state.totalTime = state.totalTime - time
    },
    [types.SAVE_PLAN] (state, plan) {
      const avatar = 'https://sfault-avatar.b0.upaiyun.com/147/223/147223148-573297d0913c5_huge256'
      state.list.push(
        Object.assign({name: 'Jack', avatar: avatar}, plan)
      )
    },
    [types.DELETE_PLAN] (state, idx) {
      state.list.splice(idx, 1)
    }
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/72bi5.png" rel="nofollow noreferrer">Define functions name</a>
  <a href="https://i.stack.imgur.com/goRlZ.png" rel="nofollow noreferrer">Function Call</a></p>