vuex中涉及的es6语法的小疑惑

Question

// types.js

// 定义 getter、action、和 mutation 的名称为常量，以模块名 `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'

// 使用添加了前缀的名称定义 getter、action 和 mutation
const todosModule = {
  state: { todos: [] },

  getters: {
    [types.DONE_COUNT] (state) {
      // ...
    }
  },

  actions: {
    [types.FETCH_ALL] (context, payload) {
      // ...
    }
  },

  mutations: {
    [types.TOGGLE_DONE] (state, payload) {
      // ...
    }
  }
}

在上面demo中types是es6模块，模块有三个属性DONE_COUNT、FETCH_ALL、TOGGLE_DONE，那么在声明getter和actions或者mutations时候直接写就好了，为何要带[]号呢，除了[]可以吗？好像这是ES6的计算属性结构，但又说不清楚怎么回事，如果可以最好列举几个清晰的列子说明。

Answer 1

我前几天看到这个也是一头雾水，找了一下es6语法，看到了。http://es6.ruanyifeng.com/#docs/object#属性名表达式 （链接中文hash好像会被忽略,建议复制链接地址再去浏览器地址栏打开，或者整一页面都看完，哈哈哈）

看链接里的例子

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};

obj.hello() // hi

[]里面包含的是一个表达式，表达式的值作为这个对象的方法名了，所以 obj就有了hello这个成员方法

反观题主的例子。

const DONE_COUNT = 'todos/DONE_COUNT'

getters: {
    [types.DONE_COUNT] (state) {
      // ...
    }
  },

所以getters就拥有一个叫 todos/DONE_COUNT的function了。去掉[]可以不？

我举个例子

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

执行后你会发现，不加[]的话t就当做方法名了， 而加上[]方法名则是t变量的值（hi），其实这也很明显。

不过我倒是觉得奇怪方法名可以带/的么= =，不过试了一下，只要调用方法不像常规那样调用，还是可以的，见下例

var t = 'h/i';
var obj1 = {
    t(){
        console.log(1);
    },
    [t](){
        console.log(2)
    }
}
obj1.t()//1
obj1['h/i']()//2
obj1.h/i() // 这肯定报错了

Answer 2

@Dont 已经回答得很详细了，我简单的补充一下

var name = "hello";
var a = {};
a[name] = "world";

这时候 a 就是 { hello: "world" }，这是早就有的语法，好理解吧。

现在为了方便初始化对象字面量，把 [] 运算引入了初始化语法中，所以

var name = "hello";
var a = {
    [name]: "world"
};

这里 [name] 其实和 a[name] = "world" 中的 [name] 是一样的，是把 name 的值(表达式计算结果)作来键名(属性名)。

不知道这样说会不会好理解一些呢

Answer 3

有变量来做key的时候必须要加[]，比如var key = 'name',那么{ [key]: 'jack'} 其实是{ name: 'jack' }