VUE里面：[CHANGE_MSG](state, msg)这个是什么语法？

Question

部分代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import { CHANGE_MSG, INCREMENT_COUNTER } from './mutation_types'

Vue.use(Vuex)

const state = {
  message: 'Hello Vue!',
  counter: 0
}

const mutations = {
  [CHANGE_MSG](state, msg) {
    state.message = msg
  },
  [INCREMENT_COUNTER](state) {
    state.counter ++;
  }
}

Answer 1

每个mutation都有一个字符串的事件类型和一个回调函数，事件类型就是你的CHANG_MSG，后面的是回调函数，一般可以把事件类型作为常量存在mutation_types.js这个文件里面，方便统一管理，在你的store.js引入之后就可以

CHANGE_MSG (state, msg) {
    state.message = msg
  }

这样commit你的mutation
在组件里使用的话首先import你的mutation_types.js

import * as types from '../store/mutation_types'

如果需要提交mutation，那么在方法里面

this.$store.commit(types.CHANGE_MSG)

Answer 2

vuex中的mutation的写法，用于修改state中的数据
等同于：

const mutations = {
  CHANGE_MSG (state, msg) {
    state.message = msg
  },
  INCREMENT_COUNTER (state) {
    state.counter ++;
  }
}

具体可以查看 https://vuex.vuejs.org/zh-cn/...

Answer 3

方法简写+属性名表达式