Menu
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) { }, } 
969
Mutations are intended to receive input only via their payload and to not produce side effects elsewhere. While actions get a full context to work with, mutations only have the state and the payload .
In Vuex, actions are functions that call mutations. Actions exist because mutations must be synchronous, whereas actions can be asynchronous. You can define actions by passing a POJO as the actions property to the Vuex store constructor as shown below. To "call" an action, you should use the Store#dispatch() function.
In Vuex, mutations are synchronous transactions: store. commit('increment') // any state change that the "increment" mutation may cause // should be done at this moment. To handle asynchronous operations, let's introduce Actions.
Vuex allows us to define "getters" in the store. You can think of them as computed properties for stores. Like computed properties, a getter's result is cached based on its dependencies, and will only re-evaluate when some of its dependencies have changed.
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.
50
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
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
