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

问题描述

问 题

// 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的计算属性结构，但又说不清楚怎么回事，如果可以最好列举几个清晰的列子说明。

解决方案

我前几天看到这个也是一头雾水，找了一下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() // 这肯定报错了

这篇关于javascript - vuex中涉及的es6语法的小疑惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！