这个奇怪的语法 [SOME_MUTATION] (state) 用于 JavaScript 中的函数定义是什么意思？答案

【问题标题】：What is the meaning of this strange syntax [SOME_MUTATION] (state) for function definition in JavaScript?这个奇怪的语法 [SOME_MUTATION] (state) 用于 JavaScript 中的函数定义是什么意思？
【发布时间】：2019-01-16 11:53:37
【问题描述】：

在 Vue 中，我看到如下代码：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

和

// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // we can use the ES2015 computed property name feature
    // to use a constant as the function name
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

语法 [SOME_MUTATION] (state) 来自哪里？ [SOME_MUTATION, ANOTHER] (state) 也是有效的语法吗？为什么不使用 SOME_MUTATION (state)（这是有效的函数语法）？

在大型 Vue 项目中，如何将所有 export const SOME_MUTATION = 'SOME_MUTATION' 定义放在单独的文件中，而不是放在同一个文件 (store.js) 中？

【问题讨论】：

真正的程序员不写cmets，为什么要读它们：p
但是代码 cmets 没有回答我的两个子问题：为什么不使用 SOME_MUTATION (state)（这是有效的函数语法）？在大型 Vue 项目中，如何将所有 export const SOME_MUTATION = 'SOME_MUTATION' 定义放在单独的文件中，而不是放在同一个文件（store.js）中？
@JaromandaX 有趣的是，我发现您的评论比 @appleapple 的评论更有帮助和友好。 @ace 使用计算属性名称是因为您可以重用常量来命名action 和mutation 函数（通常共享相同的名称），也可以在使用命名空间模块时在组件中使用常量vuex namespacedHelpers 或类似 this.$store.dispatch(FOO_CONSTANT, bar) 的东西。基本上它减少了打字错误。
@ace 这是一个偏好问题，实际上在文档here 中有说明。 “是否使用常量在很大程度上是一种偏好——它在有许多开发人员的大型项目中很有帮助，但如果你不喜欢它们，它完全是可选的。”
那么你不应该首先问 2 个问题。（为什么我的最后一条评论被删除了（有 4 个赞）？

标签： javascript vue.js ecmascript-6 vuejs2

【解决方案1】：

这是一种 JavaScript 语法，用于以编程/动态方式定义 object key。

例如，你有一个变量：

var myFunctionName = "getUsers";

您实际上可以在object 中创建一个function，使用变量的值作为函数名。

例如，

{
    [myFunctionName]() {
        // do something
    }
}

实际上会变成：

ES6：

{
    getUsers() {
        // do something
    }
}

或 ES5：

{
    getUsers: function() {
        // do something
    }
}

这不仅限于在对象中创建函数，还可以应用于对象中的任何属性。

例如：

let myPropertyName = 'user';
{
    [myPropertyName]: {
        name: 'Hello',
        age: 10
    }
}

会变成：

{
    user: {
        name: 'Hello',
        age: 10
    }
}

【讨论】：

你忘了替换myFunctionName

【解决方案2】：

在这一行

import { SOME_MUTATION } from './mutation-types'

在您将类型导入SOME_MUTATION 的位置，它有一个字符串值。现在要在对象中定义一个具有此名称的函数，您需要这样做

{
   [SOME_MUTATION](state) {

   }
}

将与（如果SOME_MUTATION 有一个值，比如changeState）

{
    changeState: function(state){

    }
}

默认情况下，状态是作为参数传递的。

阅读更多here

我们更喜欢在 Vue 应用程序中使用这种类型的架构，以避免在跨多个组件定义 Mutations 和 Actions 和 Getter 时出现名称冲突。

【讨论】：