Question

在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]（状态）语法从何而来？ [SOME_MUTATION，ANOTHER]（州）也是有效的语法吗？为什么不使用SOME_MUTATION（状态）（有效的函数语法）？

在大型Vue项目中，如何将所有导出const SOME_MUTATION ='SOME_MUTATION'定义放在单独的文件中，而不是放在同一个文件（store.js）中，真的有帮助吗？

Answer 1

在这一行

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

要将类型导入SOME_MUTATION的地方，它具有字符串值。现在，您需要在对象中定义具有此名称的函数

{
   [SOME_MUTATION](state) {

   }
}

与（如果SOME_MUTATION的值说为changeState相同）

{
    changeState: function(state){

    }
}

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

了解更多here

我们在Vue应用程序中更喜欢这种类型的体系结构，以避免在跨多个组件定义Mutations，Actions和Getters时发生名称冲突。

Answer 2

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

例如，您有一个变量：

var myFunctionName = "getUsers";

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

例如，

{
    [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
    }
}

JavaScript中用于函数定义的这种奇怪语法[SOME_MUTATION]（状态）是什么意思？

2 个答案: