While working on the next major version of Directus (which is written in Vue), we set up the mutations to use constants for mutation types, as recommended in the docs. This helps a lot when you’re working with multiple developers (like lets say when working on a big CMS) and is especially useful seeing it also provides us with a single list of all available mutations.

The way this works is like follows:

// mutation-types.js

export const SOME_MUTATION = 'SOME_MUTATION'; // mutations.js

import { SOME_MUTATION } from './mutation-types'; export default {

// we can use the ES2015 computed property name feature

// to use a constant as the function name

[SOME_MUTATION](state) {

// mutate state

}

};

While this does the job perfectly, I quickly became annoyed by a miniature detail; the way the mutations are named make them look very “aggressive” in the (amazing) Vue devtools:

Vue Devtools Vuex mutations

I thought people used it this way due to:

It’s a constant

Seeing it’s a constant, it’s considered “best practice” in a lot of styleguides / eslint rulesets to have them named in ALL_CAPS.

While this is true, it doesn’t mean that the value of the constant has to be in all caps too!

It’s a function name

I (wrongly) assumed that this naming scheme came from the fact that these mutations are functions. However, they are methods in the way we set them up. That opens up a whole new world of possibilities!

From the MDN Webdocs:

An object property name can be any valid JavaScript string, or anything that can be converted to a string, including the empty string. However, any property name that is not a valid JavaScript identifier (for example, a property name that has a space or a hyphen, or that starts with a number) can only be accessed using the square bracket notation.

Seeing that Strings in JavaScript can hold basically anything (even escaped Unicode sequences), we can do some pretty crazy stuff. For example use zero width spaces as method names:

Mess with everyone on the interwebs

Or even use emoji as method names, for that nicer error handling:

Emojis make everything better

While this arguably not very useful in most real-life cases, there is one instance where this actually makes a nice difference; Vuex mutations!

By replacing our AGGRESSIVE SOUNDING names with some nicely title-cased emoji-fied names, we were able to make the Vue developer experience just a little bit nicer: