Vuex Error Do not mutate vuex store state outside mutation handlers when commit a mutation into an action...
I am using vuex in strict mode: https://vuex.vuejs.org/guide/strict.html
I have a state that I wanna change through a mutation as is described in de documentation. I fire this mutation into a settimeout, so it is an asynchronous mutation so I create an action as follow:
menuOnResize ({ commit }) {
if (!state.menuIsOpen) {
window.addEventListener('resize', resizeThrottler, false)
}
var resizeTimeout
function resizeThrottler () {
if (!resizeTimeout) {
resizeTimeout = setTimeout(() => {
resizeTimeout = null
commit('menuIsOpenOnResize')
}, 500)
}
}
}
But when the action is executed the console give me the next error:
I can't figure out what I'm doing wrong, I mean, I thinks I'm doing the thing in the right way, Mutating the state through a mutation an using a action because it is an asynchronous task.
Versions of vue and vuex:
vue: 2.5.17,
vuex: 3.0.1
javascript vue.js vuex
asked Nov 22 at 15:29
Pablo
6310
|
show 1 more comment
I am using vuex in strict mode: https://vuex.vuejs.org/guide/strict.html
I have a state that I wanna change through a mutation as is described in de documentation. I fire this mutation into a settimeout, so it is an asynchronous mutation so I create an action as follow:
menuOnResize ({ commit }) {
if (!state.menuIsOpen) {
window.addEventListener('resize', resizeThrottler, false)
}
var resizeTimeout
function resizeThrottler () {
if (!resizeTimeout) {
resizeTimeout = setTimeout(() => {
resizeTimeout = null
commit('menuIsOpenOnResize')
}, 500)
}
}
}
But when the action is executed the console give me the next error:
I can't figure out what I'm doing wrong, I mean, I thinks I'm doing the thing in the right way, Mutating the state through a mutation an using a action because it is an asynchronous task.
Versions of vue and vuex:
vue: 2.5.17,
vuex: 3.0.1
javascript vue.js vuex
asked Nov 22 at 15:29
Pablo
6310
2
Your error message doesn't seem to be matching your code, it looks like you're passing the state to a chart library and it's changing things there.
– George
Nov 22 at 15:32
The strange thing happen here is that this error only appear when my code is executed that have no relation at all with the library, which by the way is vue-chart.js. If a commented the code that call the function menuOnResize error disappears
– Pablo
Nov 22 at 15:49
it's hard to speculate why you're getting this error only looking at this specific mutation. however it could be that by using "var" in defining resizeTimeout, vue treats it as a state variable. either limit its score using "let" or define it as a state variable and thus use mutations to change its value.
– mmbrian
Nov 22 at 16:02
It is no the problem @mmbrian I reduced the code to only left the function resizeThrottler () { commit('menuIsOpenOnResize') } and the problem is still there. I will open an issue in the vue-charts github
– Pablo
Nov 22 at 17:03
I have opened an issue on the vue-chartjs github: github.com/apertureless/vue-chartjs/issues/445
– Pablo
Nov 22 at 18:13
|
show 1 more comment
I am using vuex in strict mode: https://vuex.vuejs.org/guide/strict.html
I have a state that I wanna change through a mutation as is described in de documentation. I fire this mutation into a settimeout, so it is an asynchronous mutation so I create an action as follow:
menuOnResize ({ commit }) {
if (!state.menuIsOpen) {
window.addEventListener('resize', resizeThrottler, false)
}
var resizeTimeout
function resizeThrottler () {
if (!resizeTimeout) {
resizeTimeout = setTimeout(() => {
resizeTimeout = null
commit('menuIsOpenOnResize')
}, 500)
}
}
}
But when the action is executed the console give me the next error:
I can't figure out what I'm doing wrong, I mean, I thinks I'm doing the thing in the right way, Mutating the state through a mutation an using a action because it is an asynchronous task.
Versions of vue and vuex:
vue: 2.5.17,
vuex: 3.0.1
javascript vue.js vuex
asked Nov 22 at 15:29
Pablo
6310
I am using vuex in strict mode: https://vuex.vuejs.org/guide/strict.html
I have a state that I wanna change through a mutation as is described in de documentation. I fire this mutation into a settimeout, so it is an asynchronous mutation so I create an action as follow:
menuOnResize ({ commit }) {
if (!state.menuIsOpen) {
window.addEventListener('resize', resizeThrottler, false)
}
var resizeTimeout
function resizeThrottler () {
if (!resizeTimeout) {
resizeTimeout = setTimeout(() => {
resizeTimeout = null
commit('menuIsOpenOnResize')
}, 500)
}
}
}
But when the action is executed the console give me the next error:
I can't figure out what I'm doing wrong, I mean, I thinks I'm doing the thing in the right way, Mutating the state through a mutation an using a action because it is an asynchronous task.
Versions of vue and vuex:
vue: 2.5.17,
vuex: 3.0.1
javascript vue.js vuex
javascript vue.js vuex
asked Nov 22 at 15:29
Pablo
6310
asked Nov 22 at 15:29
Pablo
6310
asked Nov 22 at 15:29
Pablo
6310
asked Nov 22 at 15:29
Pablo
6310
asked Nov 22 at 15:29
Pablo
6310
6310
2
Your error message doesn't seem to be matching your code, it looks like you're passing the state to a chart library and it's changing things there.
– George
Nov 22 at 15:32
The strange thing happen here is that this error only appear when my code is executed that have no relation at all with the library, which by the way is vue-chart.js. If a commented the code that call the function menuOnResize error disappears
– Pablo
Nov 22 at 15:49
it's hard to speculate why you're getting this error only looking at this specific mutation. however it could be that by using "var" in defining resizeTimeout, vue treats it as a state variable. either limit its score using "let" or define it as a state variable and thus use mutations to change its value.
– mmbrian
Nov 22 at 16:02
It is no the problem @mmbrian I reduced the code to only left the function resizeThrottler () { commit('menuIsOpenOnResize') } and the problem is still there. I will open an issue in the vue-charts github
– Pablo
Nov 22 at 17:03
I have opened an issue on the vue-chartjs github: github.com/apertureless/vue-chartjs/issues/445
– Pablo
Nov 22 at 18:13
|
show 1 more comment
2
Your error message doesn't seem to be matching your code, it looks like you're passing the state to a chart library and it's changing things there.
– George
Nov 22 at 15:32
The strange thing happen here is that this error only appear when my code is executed that have no relation at all with the library, which by the way is vue-chart.js. If a commented the code that call the function menuOnResize error disappears
– Pablo
Nov 22 at 15:49
it's hard to speculate why you're getting this error only looking at this specific mutation. however it could be that by using "var" in defining resizeTimeout, vue treats it as a state variable. either limit its score using "let" or define it as a state variable and thus use mutations to change its value.
– mmbrian
Nov 22 at 16:02
It is no the problem @mmbrian I reduced the code to only left the function resizeThrottler () { commit('menuIsOpenOnResize') } and the problem is still there. I will open an issue in the vue-charts github
– Pablo
Nov 22 at 17:03
I have opened an issue on the vue-chartjs github: github.com/apertureless/vue-chartjs/issues/445
– Pablo
Nov 22 at 18:13
2
2
Your error message doesn't seem to be matching your code, it looks like you're passing the state to a chart library and it's changing things there.
– George
Nov 22 at 15:32
Your error message doesn't seem to be matching your code, it looks like you're passing the state to a chart library and it's changing things there.
– George
Nov 22 at 15:32
The strange thing happen here is that this error only appear when my code is executed that have no relation at all with the library, which by the way is vue-chart.js. If a commented the code that call the function menuOnResize error disappears
– Pablo
Nov 22 at 15:49
The strange thing happen here is that this error only appear when my code is executed that have no relation at all with the library, which by the way is vue-chart.js. If a commented the code that call the function menuOnResize error disappears
– Pablo
Nov 22 at 15:49
it's hard to speculate why you're getting this error only looking at this specific mutation. however it could be that by using "var" in defining resizeTimeout, vue treats it as a state variable. either limit its score using "let" or define it as a state variable and thus use mutations to change its value.
– mmbrian
Nov 22 at 16:02
it's hard to speculate why you're getting this error only looking at this specific mutation. however it could be that by using "var" in defining resizeTimeout, vue treats it as a state variable. either limit its score using "let" or define it as a state variable and thus use mutations to change its value.
– mmbrian
Nov 22 at 16:02
It is no the problem @mmbrian I reduced the code to only left the function resizeThrottler () { commit('menuIsOpenOnResize') } and the problem is still there. I will open an issue in the vue-charts github
– Pablo
Nov 22 at 17:03
It is no the problem @mmbrian I reduced the code to only left the function resizeThrottler () { commit('menuIsOpenOnResize') } and the problem is still there. I will open an issue in the vue-charts github
– Pablo
Nov 22 at 17:03
I have opened an issue on the vue-chartjs github: github.com/apertureless/vue-chartjs/issues/445
– Pablo
Nov 22 at 18:13
I have opened an issue on the vue-chartjs github: github.com/apertureless/vue-chartjs/issues/445
– Pablo
Nov 22 at 18:13
|
show 1 more comment
active
oldest
votes
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%2f53434146%2fvuex-error-do-not-mutate-vuex-store-state-outside-mutation-handlers-when-commit%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53434146%2fvuex-error-do-not-mutate-vuex-store-state-outside-mutation-handlers-when-commit%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
2
Your error message doesn't seem to be matching your code, it looks like you're passing the state to a chart library and it's changing things there.
– George
Nov 22 at 15:32
The strange thing happen here is that this error only appear when my code is executed that have no relation at all with the library, which by the way is vue-chart.js. If a commented the code that call the function menuOnResize error disappears
– Pablo
Nov 22 at 15:49
it's hard to speculate why you're getting this error only looking at this specific mutation. however it could be that by using "var" in defining resizeTimeout, vue treats it as a state variable. either limit its score using "let" or define it as a state variable and thus use mutations to change its value.
– mmbrian
Nov 22 at 16:02
It is no the problem @mmbrian I reduced the code to only left the function resizeThrottler () { commit('menuIsOpenOnResize') } and the problem is still there. I will open an issue in the vue-charts github
– Pablo
Nov 22 at 17:03
I have opened an issue on the vue-chartjs github: github.com/apertureless/vue-chartjs/issues/445
– Pablo
Nov 22 at 18:13