Vuex: Why do we write mutations, actions and getters in uppercase?
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) {
},
}
vue.js vuejs2 vuex
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
add a comment |
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) {
},
}
vue.js vuejs2 vuex
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
add a comment |
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) {
},
}
vue.js vuejs2 vuex
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
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) {
},
}
vue.js vuejs2 vuex
vue.js vuejs2 vuex
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
asked Jun 15 '17 at 15:54
Julien Le CoupanecJulien Le Coupanec
2,88813047
2,88813047
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
add a comment |
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.
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44571955%2fvuex-why-do-we-write-mutations-actions-and-getters-in-uppercase%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
add a comment |
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
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
add a comment |
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
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
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
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
answered Jun 15 '17 at 16:00
BertBert
44.9k67484
44.9k67484
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
add a comment |
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
Thanks for this detailed explanation.
– Julien Le Coupanec
Jun 15 '17 at 16:14
add a comment |
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.
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
add a comment |
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.
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
add a comment |
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.
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
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.
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
edited Nov 14 '18 at 13:24
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
answered Nov 14 '18 at 12:40
PwdrPwdr
2,49611629
2,49611629
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44571955%2fvuex-why-do-we-write-mutations-actions-and-getters-in-uppercase%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
