Vuex：函数声明与函数名称之间的区别（作为突变中的键）

Question

我具有以下Vuex结构。

（store / actions.js store / mutations.js，...）

在突变中编写函数时，我已经看到两种情况

案例1

import {
  MUTATION_ONE
  MUTATION_TWO
  ...
} from './mutation_group';

export default {
  [SOME_MUTATION](parameter) { .. }
};

案例2

import {
  MUTATION_ONE
  MUTATION_TWO
  ...
} from './mutation_group';

export default {
  SOME_MUTATION: function (parameter) { .. }
};

简单地使用函数声明和通过计算的属性名称将变量用作键值之间有什么区别？

Answer 1

情况1和2仅在MUTATION_ONE === 'MUTATION_ONE'时才可以互换，而情况1的计算属性保证无论SOME_MUTATION的值如何，都将指定正确的突变名称。

在Redux命名约定中，操作类型通常是大写的常量，但是它们不必具有相同的值，操作类型可以使用命名空间：

export const MUTATION_ONE = 'FOO/MUTATION_ONE';

此Redux结构和潜在问题不一定适用于Vuex。 Vuex用modules and namespaces解决了这种情况。