Mixing
Vuex unexpectedly updates 2 state objects
I've got a list of companies. When the user clicks on a list item, this company is set as "selectedCompany" in the store and the single item view is displayed. To allow the user to edit different sections, he can switch to edit mode. When this happens, the selectedCompany is copied to another state variable: "companyToUpdate"
My intended behaviour is for the user to edit the cloned version so that in case he cancels, the cloned version is destroyed and the underlying actual version is not touched.
If he proceeds to send the edit to the server, the response will replace the current "selectedCompany".
The problem I am having is that whenever I change the cloned version, the original version changes as well when its not supposed to.
Here's my code, but maybe there's also an altogether better way to do this...
vuex store module:
const state = {
selectedCompany: {},
companyToUpdate: false,
editMode: false,
}
const actions = {
setEditMode: ({ commit, dispatch }, payload) => {
dispatch('singleCompany/cloneSelectedCompany', payload, { root: true } )
commit('setEditMode', payload);
},
cloneSelectedCompany: ({ commit, state }, payload) => {
if (payload) { let clone = state.selectedCompany; commit('cloneSelectedCompany', clone); }
if (!payload) { commit('cloneSelectedCompany', payload); }
},
updateCompanyLocally: ({ commit }, payload) => { commit('updateCompanyLocally', payload); },
}
const mutations = {
setEditMode: (state,payload) => { state.editMode = payload },
cloneSelectedCompany: (state,payload) => { state.companyToUpdate = payload },
updateCompanyLocally: (state,payload) => {
state.companyToUpdate[payload.fieldName] = payload.input
},
}
None of my mutations update the selectedCompany state, and yet it does change.
PS I am also using vuex-persistedstate...maybe that messes with it in some way
vue.js vuex vuex-modules
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
add a comment |
I've got a list of companies. When the user clicks on a list item, this company is set as "selectedCompany" in the store and the single item view is displayed. To allow the user to edit different sections, he can switch to edit mode. When this happens, the selectedCompany is copied to another state variable: "companyToUpdate"
My intended behaviour is for the user to edit the cloned version so that in case he cancels, the cloned version is destroyed and the underlying actual version is not touched.
If he proceeds to send the edit to the server, the response will replace the current "selectedCompany".
The problem I am having is that whenever I change the cloned version, the original version changes as well when its not supposed to.
Here's my code, but maybe there's also an altogether better way to do this...
vuex store module:
const state = {
selectedCompany: {},
companyToUpdate: false,
editMode: false,
}
const actions = {
setEditMode: ({ commit, dispatch }, payload) => {
dispatch('singleCompany/cloneSelectedCompany', payload, { root: true } )
commit('setEditMode', payload);
},
cloneSelectedCompany: ({ commit, state }, payload) => {
if (payload) { let clone = state.selectedCompany; commit('cloneSelectedCompany', clone); }
if (!payload) { commit('cloneSelectedCompany', payload); }
},
updateCompanyLocally: ({ commit }, payload) => { commit('updateCompanyLocally', payload); },
}
const mutations = {
setEditMode: (state,payload) => { state.editMode = payload },
cloneSelectedCompany: (state,payload) => { state.companyToUpdate = payload },
updateCompanyLocally: (state,payload) => {
state.companyToUpdate[payload.fieldName] = payload.input
},
}
None of my mutations update the selectedCompany state, and yet it does change.
PS I am also using vuex-persistedstate...maybe that messes with it in some way
vue.js vuex vuex-modules
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
add a comment |
I've got a list of companies. When the user clicks on a list item, this company is set as "selectedCompany" in the store and the single item view is displayed. To allow the user to edit different sections, he can switch to edit mode. When this happens, the selectedCompany is copied to another state variable: "companyToUpdate"
My intended behaviour is for the user to edit the cloned version so that in case he cancels, the cloned version is destroyed and the underlying actual version is not touched.
If he proceeds to send the edit to the server, the response will replace the current "selectedCompany".
The problem I am having is that whenever I change the cloned version, the original version changes as well when its not supposed to.
Here's my code, but maybe there's also an altogether better way to do this...
vuex store module:
const state = {
selectedCompany: {},
companyToUpdate: false,
editMode: false,
}
const actions = {
setEditMode: ({ commit, dispatch }, payload) => {
dispatch('singleCompany/cloneSelectedCompany', payload, { root: true } )
commit('setEditMode', payload);
},
cloneSelectedCompany: ({ commit, state }, payload) => {
if (payload) { let clone = state.selectedCompany; commit('cloneSelectedCompany', clone); }
if (!payload) { commit('cloneSelectedCompany', payload); }
},
updateCompanyLocally: ({ commit }, payload) => { commit('updateCompanyLocally', payload); },
}
const mutations = {
setEditMode: (state,payload) => { state.editMode = payload },
cloneSelectedCompany: (state,payload) => { state.companyToUpdate = payload },
updateCompanyLocally: (state,payload) => {
state.companyToUpdate[payload.fieldName] = payload.input
},
}
None of my mutations update the selectedCompany state, and yet it does change.
PS I am also using vuex-persistedstate...maybe that messes with it in some way
vue.js vuex vuex-modules
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
I've got a list of companies. When the user clicks on a list item, this company is set as "selectedCompany" in the store and the single item view is displayed. To allow the user to edit different sections, he can switch to edit mode. When this happens, the selectedCompany is copied to another state variable: "companyToUpdate"
My intended behaviour is for the user to edit the cloned version so that in case he cancels, the cloned version is destroyed and the underlying actual version is not touched.
If he proceeds to send the edit to the server, the response will replace the current "selectedCompany".
The problem I am having is that whenever I change the cloned version, the original version changes as well when its not supposed to.
Here's my code, but maybe there's also an altogether better way to do this...
vuex store module:
const state = {
selectedCompany: {},
companyToUpdate: false,
editMode: false,
}
const actions = {
setEditMode: ({ commit, dispatch }, payload) => {
dispatch('singleCompany/cloneSelectedCompany', payload, { root: true } )
commit('setEditMode', payload);
},
cloneSelectedCompany: ({ commit, state }, payload) => {
if (payload) { let clone = state.selectedCompany; commit('cloneSelectedCompany', clone); }
if (!payload) { commit('cloneSelectedCompany', payload); }
},
updateCompanyLocally: ({ commit }, payload) => { commit('updateCompanyLocally', payload); },
}
const mutations = {
setEditMode: (state,payload) => { state.editMode = payload },
cloneSelectedCompany: (state,payload) => { state.companyToUpdate = payload },
updateCompanyLocally: (state,payload) => {
state.companyToUpdate[payload.fieldName] = payload.input
},
}
None of my mutations update the selectedCompany state, and yet it does change.
PS I am also using vuex-persistedstate...maybe that messes with it in some way
vue.js vuex vuex-modules
vue.js vuex vuex-modules
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
asked Nov 20 '18 at 18:40
martinvalmartinval
5410
5410
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The issue originates from JS itself, as objects are passed by reference, not by value, so Vuex will point to the same object in memory.
To create a new object based on the existing object, you can use a hacky parse and stringify inside your cloneSelectedCompany mutation:
let clone = state.selectedCompany;
should be
let clone = JSON.parse(JSON.stringify(state.selectedCompany));
Depending on your use case it could also possible that you need to deep clone your object.
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
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%2f53399475%2fvuex-unexpectedly-updates-2-state-objects%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The issue originates from JS itself, as objects are passed by reference, not by value, so Vuex will point to the same object in memory.
To create a new object based on the existing object, you can use a hacky parse and stringify inside your cloneSelectedCompany mutation:
let clone = state.selectedCompany;
should be
let clone = JSON.parse(JSON.stringify(state.selectedCompany));
Depending on your use case it could also possible that you need to deep clone your object.
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
add a comment |
The issue originates from JS itself, as objects are passed by reference, not by value, so Vuex will point to the same object in memory.
To create a new object based on the existing object, you can use a hacky parse and stringify inside your cloneSelectedCompany mutation:
let clone = state.selectedCompany;
should be
let clone = JSON.parse(JSON.stringify(state.selectedCompany));
Depending on your use case it could also possible that you need to deep clone your object.
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
add a comment |
The issue originates from JS itself, as objects are passed by reference, not by value, so Vuex will point to the same object in memory.
To create a new object based on the existing object, you can use a hacky parse and stringify inside your cloneSelectedCompany mutation:
let clone = state.selectedCompany;
should be
let clone = JSON.parse(JSON.stringify(state.selectedCompany));
Depending on your use case it could also possible that you need to deep clone your object.
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
The issue originates from JS itself, as objects are passed by reference, not by value, so Vuex will point to the same object in memory.
To create a new object based on the existing object, you can use a hacky parse and stringify inside your cloneSelectedCompany mutation:
let clone = state.selectedCompany;
should be
let clone = JSON.parse(JSON.stringify(state.selectedCompany));
Depending on your use case it could also possible that you need to deep clone your object.
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
edited Nov 20 '18 at 19:05
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
answered Nov 20 '18 at 18:46
Bennett DamsBennett Dams
1,4071318
1,4071318
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
add a comment |
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
Thanks, it didn't occur to me that this was a js issue.
– martinval
Nov 20 '18 at 20:28
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%2f53399475%2fvuex-unexpectedly-updates-2-state-objects%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
