Little Doubts about es6 Grammar Involved in vuex

  javascript, question
// types.js
 
 //Defines the names of getter, action, and mutation as constants, prefixed by module name' todos'
 export const DONE_COUNT = 'todos/DONE_COUNT'
 export const FETCH_ALL = 'todos/FETCH_ALL'
 export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
 // modules/todos.js
 import * as types from '../types'
 
 //Define getter, action, and mutation with prefixed names
 const todosModule = {
 state: { todos: [] },
 
 getters: {
 [types.DONE_COUNT] (state) {
 //   ...
 bracket
 },
 
 actions: {
 [types.FETCH_ALL] (context, payload) {
 //   ...
 bracket
 },
 
 mutations: {
 [types.TOGGLE_DONE] (state, payload) {
 //   ...
 bracket
 bracket
 bracket

In the demo above, types are es6 modules. Modules have three attributes: DONE_COUNT, FETCH_ALL, TOGGLE_DONE. It is good to write directly when declaring getter and actions or mutations. Why do you need [] numbers, except []? It seems that this is the calculation attribute structure of ES6, but it is not clear what is going on. If it is best to list a few clear column descriptions.

I saw this a few days ago and I was confused. I looked for es6 grammar and saw it.Http://es6.ruanyifeng.com/#docs/object# Attribute Name Expression(Chinese hash of links seems to be ignored, it is suggested to copy the link address and open it in the address bar of the browser, or read the whole page, ha, ha, ha)

Look at the example of linked inside

let obj = {
 ['h' plus 'ello'] () {
 return 'hi';
 bracket
 };
 
 obj.hello() // hi

[] contains an expression whose value serves as the method name of this object, so obj has the member method hello

Look back at the example of the subject.

const DONE_COUNT = 'todos/DONE_COUNT'
 
 getters: {
 [types.DONE_COUNT] (state) {
 //   ...
 bracket
 },

So getters has a nametodos/DONE_COUNTThis is the first time that you’ve been able to do this. Remove[]Can not?

Let me give you an example.

var t = 'hi';
 var obj = {
 t(){
 console.log(1);
 },
 [t](){
 console.log(2)
 bracket
 bracket
 obj.t()//1
 obj.hi()//2

After the execution, you will find that, without adding[]If t is used as the method name, add[]The method name is the value (hi) of the t variable, which is also obvious.

However, I do think it is strange to bring a method name./Yao = =, but tried, as long as the calling method is not called as usual, it is still possible, see the following example

var t = 'h/i';
 var obj1 = {
 t(){
 console.log(1);
 },
 [t](){
 console.log(2)
 bracket
 bracket
 obj1.t()//1
 obj1['h/i']()//2
 Obj1.h/i() // this must be a mistake.