Accessing Vuex state object property from component
I'm trying to change value of a state object property from a component but I can't find the proper way to do it
Here is my state:
state: {
articles: [ {
title: "Lorem ipsum",
position: 7
}, {
title: "Lorem ipsum",
position: 8
}
]
}
In the computed property of the component :
return this.$store.state.articles.filter((article) => {
return (article.title).match(this.search); /// just a search field, don't mind it
});
I would like to change every article.position under 10 to article.position = +'0'article.position.
I tried :
let articlesList = this.$store.state.articles
if(articlesList.position < 10) {
articlesList.position = +'0'articlesList.position
}
I know this is not the good way to do it but this is all I have. Any tips? :)
vue.js vuex
asked Nov 10 at 14:24
Arkaer
261
add a comment |
I'm trying to change value of a state object property from a component but I can't find the proper way to do it
Here is my state:
state: {
articles: [ {
title: "Lorem ipsum",
position: 7
}, {
title: "Lorem ipsum",
position: 8
}
]
}
In the computed property of the component :
return this.$store.state.articles.filter((article) => {
return (article.title).match(this.search); /// just a search field, don't mind it
});
I would like to change every article.position under 10 to article.position = +'0'article.position.
I tried :
let articlesList = this.$store.state.articles
if(articlesList.position < 10) {
articlesList.position = +'0'articlesList.position
}
I know this is not the good way to do it but this is all I have. Any tips? :)
vue.js vuex
asked Nov 10 at 14:24
Arkaer
261
you should change the state only with mutations. (vuex.vuejs.org/guide/mutations.html) then you can call the mutaion withstore.commit('ajustPosition')
– wheeler
Nov 10 at 14:44
Thank you for your help. How should I access to the state.articles.position in the mutation?
– Arkaer
Nov 10 at 15:48
add a comment |
I'm trying to change value of a state object property from a component but I can't find the proper way to do it
Here is my state:
state: {
articles: [ {
title: "Lorem ipsum",
position: 7
}, {
title: "Lorem ipsum",
position: 8
}
]
}
In the computed property of the component :
return this.$store.state.articles.filter((article) => {
return (article.title).match(this.search); /// just a search field, don't mind it
});
I would like to change every article.position under 10 to article.position = +'0'article.position.
I tried :
let articlesList = this.$store.state.articles
if(articlesList.position < 10) {
articlesList.position = +'0'articlesList.position
}
I know this is not the good way to do it but this is all I have. Any tips? :)
vue.js vuex
asked Nov 10 at 14:24
Arkaer
261
I'm trying to change value of a state object property from a component but I can't find the proper way to do it
Here is my state:
state: {
articles: [ {
title: "Lorem ipsum",
position: 7
}, {
title: "Lorem ipsum",
position: 8
}
]
}
In the computed property of the component :
return this.$store.state.articles.filter((article) => {
return (article.title).match(this.search); /// just a search field, don't mind it
});
I would like to change every article.position under 10 to article.position = +'0'article.position.
I tried :
let articlesList = this.$store.state.articles
if(articlesList.position < 10) {
articlesList.position = +'0'articlesList.position
}
I know this is not the good way to do it but this is all I have. Any tips? :)
vue.js vuex
vue.js vuex
asked Nov 10 at 14:24
Arkaer
261
asked Nov 10 at 14:24
Arkaer
261
asked Nov 10 at 14:24
Arkaer
261
asked Nov 10 at 14:24
Arkaer
261
asked Nov 10 at 14:24
Arkaer
261
261
you should change the state only with mutations. (vuex.vuejs.org/guide/mutations.html) then you can call the mutaion withstore.commit('ajustPosition')
– wheeler
Nov 10 at 14:44
Thank you for your help. How should I access to the state.articles.position in the mutation?
– Arkaer
Nov 10 at 15:48
add a comment |
you should change the state only with mutations. (vuex.vuejs.org/guide/mutations.html) then you can call the mutaion withstore.commit('ajustPosition')
– wheeler
Nov 10 at 14:44
Thank you for your help. How should I access to the state.articles.position in the mutation?
– Arkaer
Nov 10 at 15:48
you should change the state only with mutations. (vuex.vuejs.org/guide/mutations.html) then you can call the mutaion with
store.commit('ajustPosition')– wheeler
Nov 10 at 14:44
you should change the state only with mutations. (vuex.vuejs.org/guide/mutations.html) then you can call the mutaion with
store.commit('ajustPosition')– wheeler
Nov 10 at 14:44
Thank you for your help. How should I access to the state.articles.position in the mutation?
– Arkaer
Nov 10 at 15:48
Thank you for your help. How should I access to the state.articles.position in the mutation?
– Arkaer
Nov 10 at 15:48
add a comment |
1 Answer
1
active
oldest
votes
You should put all Vuex state change code into the Vuex store itself, via a mutation or an action. Mutations are for synchronous data changes that will update all reactive components. Actions are for asynchronous events, such as persisting state changes to the server.
So, when the change occurs, it should call a method on your component, which should in turn call the appropriate mutation or action on the Vuex store.
You don't give your full code, but here is a hypothetical example:
(Edited to reflect question about accessing data from within the mutation method.)
Template:
<input type="text" name="position" :value="article.position" @input="updatePosition">
Method on Component:
methods: {
updatePosition(e) {
this.$store.commit('changeArticleOrder', article.position, e.target.value)
}
}
Mutation on Vuex Store:
mutations: {
changeArticleOrder(state, oldPosition, newPosition) {
for (var i = 0; i < 10; i++) {
state.articles[i].position = i + 1;
/* Or do whatever it is you want to do with your positioning. */
}
}
answered Nov 10 at 14:58
bluejack
198112
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
1
First argument of mutation is astateobject, that should be used to mutate state. More in Vuex documentation
– aBiscuit
Nov 10 at 16:25
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%2f53239894%2faccessing-vuex-state-object-property-from-component%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
You should put all Vuex state change code into the Vuex store itself, via a mutation or an action. Mutations are for synchronous data changes that will update all reactive components. Actions are for asynchronous events, such as persisting state changes to the server.
So, when the change occurs, it should call a method on your component, which should in turn call the appropriate mutation or action on the Vuex store.
You don't give your full code, but here is a hypothetical example:
(Edited to reflect question about accessing data from within the mutation method.)
Template:
<input type="text" name="position" :value="article.position" @input="updatePosition">
Method on Component:
methods: {
updatePosition(e) {
this.$store.commit('changeArticleOrder', article.position, e.target.value)
}
}
Mutation on Vuex Store:
mutations: {
changeArticleOrder(state, oldPosition, newPosition) {
for (var i = 0; i < 10; i++) {
state.articles[i].position = i + 1;
/* Or do whatever it is you want to do with your positioning. */
}
}
answered Nov 10 at 14:58
bluejack
198112
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
1
First argument of mutation is astateobject, that should be used to mutate state. More in Vuex documentation
– aBiscuit
Nov 10 at 16:25
add a comment |
You should put all Vuex state change code into the Vuex store itself, via a mutation or an action. Mutations are for synchronous data changes that will update all reactive components. Actions are for asynchronous events, such as persisting state changes to the server.
So, when the change occurs, it should call a method on your component, which should in turn call the appropriate mutation or action on the Vuex store.
You don't give your full code, but here is a hypothetical example:
(Edited to reflect question about accessing data from within the mutation method.)
Template:
<input type="text" name="position" :value="article.position" @input="updatePosition">
Method on Component:
methods: {
updatePosition(e) {
this.$store.commit('changeArticleOrder', article.position, e.target.value)
}
}
Mutation on Vuex Store:
mutations: {
changeArticleOrder(state, oldPosition, newPosition) {
for (var i = 0; i < 10; i++) {
state.articles[i].position = i + 1;
/* Or do whatever it is you want to do with your positioning. */
}
}
answered Nov 10 at 14:58
bluejack
198112
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
1
First argument of mutation is astateobject, that should be used to mutate state. More in Vuex documentation
– aBiscuit
Nov 10 at 16:25
add a comment |
You should put all Vuex state change code into the Vuex store itself, via a mutation or an action. Mutations are for synchronous data changes that will update all reactive components. Actions are for asynchronous events, such as persisting state changes to the server.
So, when the change occurs, it should call a method on your component, which should in turn call the appropriate mutation or action on the Vuex store.
You don't give your full code, but here is a hypothetical example:
(Edited to reflect question about accessing data from within the mutation method.)
Template:
<input type="text" name="position" :value="article.position" @input="updatePosition">
Method on Component:
methods: {
updatePosition(e) {
this.$store.commit('changeArticleOrder', article.position, e.target.value)
}
}
Mutation on Vuex Store:
mutations: {
changeArticleOrder(state, oldPosition, newPosition) {
for (var i = 0; i < 10; i++) {
state.articles[i].position = i + 1;
/* Or do whatever it is you want to do with your positioning. */
}
}
answered Nov 10 at 14:58
bluejack
198112
You should put all Vuex state change code into the Vuex store itself, via a mutation or an action. Mutations are for synchronous data changes that will update all reactive components. Actions are for asynchronous events, such as persisting state changes to the server.
So, when the change occurs, it should call a method on your component, which should in turn call the appropriate mutation or action on the Vuex store.
You don't give your full code, but here is a hypothetical example:
(Edited to reflect question about accessing data from within the mutation method.)
Template:
<input type="text" name="position" :value="article.position" @input="updatePosition">
Method on Component:
methods: {
updatePosition(e) {
this.$store.commit('changeArticleOrder', article.position, e.target.value)
}
}
Mutation on Vuex Store:
mutations: {
changeArticleOrder(state, oldPosition, newPosition) {
for (var i = 0; i < 10; i++) {
state.articles[i].position = i + 1;
/* Or do whatever it is you want to do with your positioning. */
}
}
answered Nov 10 at 14:58
bluejack
198112
edited Nov 10 at 18:38
answered Nov 10 at 14:58
bluejack
198112
answered Nov 10 at 14:58
bluejack
198112
answered Nov 10 at 14:58
bluejack
198112
198112
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
1
First argument of mutation is astateobject, that should be used to mutate state. More in Vuex documentation
– aBiscuit
Nov 10 at 16:25
add a comment |
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
1
First argument of mutation is astateobject, that should be used to mutate state. More in Vuex documentation
– aBiscuit
Nov 10 at 16:25
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
Thank you for your help. I just want to change all the article.position when they are < 10, without an event. I get them from an API in an action, and I should use a mutation to change the data. How can I access the state.articles.position in a mutation?
– Arkaer
Nov 10 at 15:47
1
1
First argument of mutation is a
state object, that should be used to mutate state. More in Vuex documentation– aBiscuit
Nov 10 at 16:25
First argument of mutation is a
state object, that should be used to mutate state. More in Vuex documentation– aBiscuit
Nov 10 at 16:25
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.
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%2f53239894%2faccessing-vuex-state-object-property-from-component%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
you should change the state only with mutations. (vuex.vuejs.org/guide/mutations.html) then you can call the mutaion with
store.commit('ajustPosition')– wheeler
Nov 10 at 14:44
Thank you for your help. How should I access to the state.articles.position in the mutation?
– Arkaer
Nov 10 at 15:48