Vuex: Difference between Function Declarations and Function name as Key in Mutation

Question

I have the following Vuex structure.

(store/actions.js store/mutations.js, ...)

And I have seen two cases when writing a function in a mutation

case 1

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

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

case 2

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

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

What is the difference between simply using function declarations and using variables as key values via computed property name?

Possible duplicate of [How to use a variable for a key in a JavaScript object literal?](https://stackoverflow.com/questions/2274242/how-to-use-a-variable-for-a-key-in-a-javascript-object-literal) — Phil, Jun 12 '19 at 05:42
Also possible duplicate of [How does this object method definition work without the “function” keyword?](https://stackoverflow.com/questions/32404617/how-does-this-object-method-definition-work-without-the-function-keyword) — Phil, Jun 12 '19 at 05:45

Estus Flask · Answer 1 · 2019-06-12T06:03:02.390

Case 1 and 2 are interchangeable only if MUTATION_ONE === 'MUTATION_ONE', while computed properties in case 1 guarantee that correct mutation name will be specified regardless of SOME_MUTATION value.

It's common for action types to be uppercased constants in Redux naming convention but they don't necessary have to be of the same value, action type could be namespaced:

export const MUTATION_ONE = 'FOO/MUTATION_ONE';

This Redux structure and underlying issues don't have to be applicable to Vuex. Vuex addresses this case with modules and namespaces.

Vuex: Difference between Function Declarations and Function name as Key in Mutation

1 Answers1