Vuex: Why do we write mutations, actions and getters in uppercase?

Question

I'm wondering why do we write the function name of mutations, actions and getters in uppercase? Where does this convention come from?

export default {   SOME_MUTATION (state, payload) {    },    ANOTHER_MUTATION (state, payload) {    }, } 

Answer 1

The accepted answer by Bert is a bit misleading. Constant variables are traditionally written in all caps, but the way it is used in the question does not make it a constant.

This allows the code to take advantage of tooling like linters

The official Vue.js documentation recommends using all caps, but as variables in an addiditonal file. This makes it possible to require the available function names in other files and use auto-complete.

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     }   } }) 

Please note the different writing-style here (computed property name with square brackets):

[SOME_MUTATION] (state) { } 

---

If you just write the function names in all upper case (i.e. SOME_MUTATION(state) { }) the only benefit is a mere visual one, to separate vuex functions from others, but in my opinion this does not make much sense. Stick to the one with computed property name ([SOME_MUTATION] (state)) to get all the benefits.

Answer 2

It is a long standing coding style to write constants in all uppercase.

From the Vuex documentation:

It is a commonly seen pattern to use constants for mutation types in various Flux implementations. This allows the code to take advantage of tooling like linters, and putting all constants in a single file allows your collaborators to get an at-a-glance view of what mutations are possible in the entire application

So, it's really just following a long standing tradition of naming constants in uppercase for the most part. It's not required.

Whether to use constants is largely a preference - it can be helpful in large projects with many developers, but it's totally optional if you don't like them