Mixing
Vuex - Computed property based on a modules state does not update on dispatch?
I am exploring the module documentation for Vuex and have been stuck for quite a while now with updating a value within a modules state from the component which uses it. Here is what I have so far:
app/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Counter from './modules/Counter'
Vue.use(Vuex)
export default new Vuex.Store({
modules: { Counter }
})
app/store/modules/Counter.js
const state = {
current: 0
}
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
}
const actions = {
increment ({ commit }) {
commit('INCREMENT_CURRENT_COUNT')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
app/components/Test.vue
<template>
<div id="wrapper">
<p>{{ count }}</p>
<button @click="something()">Do something</button>
<button @click="add()">Add to count</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: mapState({
count: state => state.Counter.current
}),
methods: {
something () {
alert('hello')
},
...mapActions('Counter', {
add: 'increment'
}),
}
}
</script>
Essentially, all I am trying to do is increment the current value in the Counter module when clicking the button in the component which fires the add() method, it is what I might expect given the above but what actually happens is nothing.
So no error and the count value within the vue component remains at 0.
Any ideas on what what am I doing wrong here?
javascript vuejs2 vuex
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
add a comment |
I am exploring the module documentation for Vuex and have been stuck for quite a while now with updating a value within a modules state from the component which uses it. Here is what I have so far:
app/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Counter from './modules/Counter'
Vue.use(Vuex)
export default new Vuex.Store({
modules: { Counter }
})
app/store/modules/Counter.js
const state = {
current: 0
}
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
}
const actions = {
increment ({ commit }) {
commit('INCREMENT_CURRENT_COUNT')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
app/components/Test.vue
<template>
<div id="wrapper">
<p>{{ count }}</p>
<button @click="something()">Do something</button>
<button @click="add()">Add to count</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: mapState({
count: state => state.Counter.current
}),
methods: {
something () {
alert('hello')
},
...mapActions('Counter', {
add: 'increment'
}),
}
}
</script>
Essentially, all I am trying to do is increment the current value in the Counter module when clicking the button in the component which fires the add() method, it is what I might expect given the above but what actually happens is nothing.
So no error and the count value within the vue component remains at 0.
Any ideas on what what am I doing wrong here?
javascript vuejs2 vuex
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
1
Can you replicate this issue on Codesandbox? It'd make it easier to debug and understand it.
– Phiter
Nov 19 '18 at 12:23
@Phiter Thanks for the input. codesandbox.io/s/415j60717 and it works (facepalm). My use case and issue was a little more complicated though as I had explained in a comment on the answer.
– Craig van Tonder
Nov 19 '18 at 13:28
damn I didn't even notice this when i was reading the question
– Phiter
Nov 19 '18 at 13:33
add a comment |
I am exploring the module documentation for Vuex and have been stuck for quite a while now with updating a value within a modules state from the component which uses it. Here is what I have so far:
app/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Counter from './modules/Counter'
Vue.use(Vuex)
export default new Vuex.Store({
modules: { Counter }
})
app/store/modules/Counter.js
const state = {
current: 0
}
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
}
const actions = {
increment ({ commit }) {
commit('INCREMENT_CURRENT_COUNT')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
app/components/Test.vue
<template>
<div id="wrapper">
<p>{{ count }}</p>
<button @click="something()">Do something</button>
<button @click="add()">Add to count</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: mapState({
count: state => state.Counter.current
}),
methods: {
something () {
alert('hello')
},
...mapActions('Counter', {
add: 'increment'
}),
}
}
</script>
Essentially, all I am trying to do is increment the current value in the Counter module when clicking the button in the component which fires the add() method, it is what I might expect given the above but what actually happens is nothing.
So no error and the count value within the vue component remains at 0.
Any ideas on what what am I doing wrong here?
javascript vuejs2 vuex
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
I am exploring the module documentation for Vuex and have been stuck for quite a while now with updating a value within a modules state from the component which uses it. Here is what I have so far:
app/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import Counter from './modules/Counter'
Vue.use(Vuex)
export default new Vuex.Store({
modules: { Counter }
})
app/store/modules/Counter.js
const state = {
current: 0
}
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
}
const actions = {
increment ({ commit }) {
commit('INCREMENT_CURRENT_COUNT')
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
app/components/Test.vue
<template>
<div id="wrapper">
<p>{{ count }}</p>
<button @click="something()">Do something</button>
<button @click="add()">Add to count</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
computed: mapState({
count: state => state.Counter.current
}),
methods: {
something () {
alert('hello')
},
...mapActions('Counter', {
add: 'increment'
}),
}
}
</script>
Essentially, all I am trying to do is increment the current value in the Counter module when clicking the button in the component which fires the add() method, it is what I might expect given the above but what actually happens is nothing.
So no error and the count value within the vue component remains at 0.
Any ideas on what what am I doing wrong here?
javascript vuejs2 vuex
javascript vuejs2 vuex
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
edited Nov 19 '18 at 13:26
Sajib Khan
10.5k42942
10.5k42942
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
asked Nov 19 '18 at 12:21
Craig van Tonder
3,429114982
3,429114982
1
Can you replicate this issue on Codesandbox? It'd make it easier to debug and understand it.
– Phiter
Nov 19 '18 at 12:23
@Phiter Thanks for the input. codesandbox.io/s/415j60717 and it works (facepalm). My use case and issue was a little more complicated though as I had explained in a comment on the answer.
– Craig van Tonder
Nov 19 '18 at 13:28
damn I didn't even notice this when i was reading the question
– Phiter
Nov 19 '18 at 13:33
add a comment |
1
Can you replicate this issue on Codesandbox? It'd make it easier to debug and understand it.
– Phiter
Nov 19 '18 at 12:23
@Phiter Thanks for the input. codesandbox.io/s/415j60717 and it works (facepalm). My use case and issue was a little more complicated though as I had explained in a comment on the answer.
– Craig van Tonder
Nov 19 '18 at 13:28
damn I didn't even notice this when i was reading the question
– Phiter
Nov 19 '18 at 13:33
1
1
Can you replicate this issue on Codesandbox? It'd make it easier to debug and understand it.
– Phiter
Nov 19 '18 at 12:23
Can you replicate this issue on Codesandbox? It'd make it easier to debug and understand it.
– Phiter
Nov 19 '18 at 12:23
@Phiter Thanks for the input. codesandbox.io/s/415j60717 and it works (facepalm). My use case and issue was a little more complicated though as I had explained in a comment on the answer.
– Craig van Tonder
Nov 19 '18 at 13:28
@Phiter Thanks for the input. codesandbox.io/s/415j60717 and it works (facepalm). My use case and issue was a little more complicated though as I had explained in a comment on the answer.
– Craig van Tonder
Nov 19 '18 at 13:28
damn I didn't even notice this when i was reading the question
– Phiter
Nov 19 '18 at 13:33
damn I didn't even notice this when i was reading the question
– Phiter
Nov 19 '18 at 13:33
add a comment |
2 Answers
2
active
oldest
votes
You should change state.main++ to state.current++
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specificallyvuex-electronand did not note the part where it saysyou need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).
– Craig van Tonder
Nov 19 '18 at 13:25
add a comment |
The problem isn't with the click handler or the action, it's in the mutation.
In your mutation INCREMENT_CURRENT_COUNT you have this:
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
Whilst your state only has a property called current.
In order to make it work, change:
state.main++
To:
state.current++
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
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%2f53374525%2fvuex-computed-property-based-on-a-modules-state-does-not-update-on-dispatch%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
You should change state.main++ to state.current++
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specificallyvuex-electronand did not note the part where it saysyou need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).
– Craig van Tonder
Nov 19 '18 at 13:25
add a comment |
You should change state.main++ to state.current++
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specificallyvuex-electronand did not note the part where it saysyou need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).
– Craig van Tonder
Nov 19 '18 at 13:25
add a comment |
You should change state.main++ to state.current++
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
You should change state.main++ to state.current++
const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}const mutations = {
INCREMENT_CURRENT_COUNT (state) {
// change state.main -> state.current
state.current++
}
}answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
edited Nov 19 '18 at 12:36
answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
answered Nov 19 '18 at 12:34
Sajib Khan
10.5k42942
10.5k42942
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specificallyvuex-electronand did not note the part where it saysyou need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).
– Craig van Tonder
Nov 19 '18 at 13:25
add a comment |
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specificallyvuex-electronand did not note the part where it saysyou need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).
– Craig van Tonder
Nov 19 '18 at 13:25
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Godammit I didn't notice that
– Phiter
Nov 19 '18 at 12:35
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specifically
vuex-electron and did not note the part where it says you need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).– Craig van Tonder
Nov 19 '18 at 13:25
Well spotted, thank you! This being said I did spot this when I was making an example on codesandbox. The issue for me specifically is that I was using this in conjuction with electron, specifically
vuex-electron and did not note the part where it says you need to create an instance of store in the main process. Solved my problem with that although I know it was not really included in my simple example (no tags for this package yet).– Craig van Tonder
Nov 19 '18 at 13:25
add a comment |
The problem isn't with the click handler or the action, it's in the mutation.
In your mutation INCREMENT_CURRENT_COUNT you have this:
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
Whilst your state only has a property called current.
In order to make it work, change:
state.main++
To:
state.current++
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
add a comment |
The problem isn't with the click handler or the action, it's in the mutation.
In your mutation INCREMENT_CURRENT_COUNT you have this:
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
Whilst your state only has a property called current.
In order to make it work, change:
state.main++
To:
state.current++
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
add a comment |
The problem isn't with the click handler or the action, it's in the mutation.
In your mutation INCREMENT_CURRENT_COUNT you have this:
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
Whilst your state only has a property called current.
In order to make it work, change:
state.main++
To:
state.current++
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
The problem isn't with the click handler or the action, it's in the mutation.
In your mutation INCREMENT_CURRENT_COUNT you have this:
INCREMENT_CURRENT_COUNT (state) {
state.main++
}
Whilst your state only has a property called current.
In order to make it work, change:
state.main++
To:
state.current++
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
answered Nov 19 '18 at 12:34
T. Dirks
1,019318
1,019318
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.
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%2f53374525%2fvuex-computed-property-based-on-a-modules-state-does-not-update-on-dispatch%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
1
Can you replicate this issue on Codesandbox? It'd make it easier to debug and understand it.
– Phiter
Nov 19 '18 at 12:23
@Phiter Thanks for the input. codesandbox.io/s/415j60717 and it works (facepalm). My use case and issue was a little more complicated though as I had explained in a comment on the answer.
– Craig van Tonder
Nov 19 '18 at 13:28
damn I didn't even notice this when i was reading the question
– Phiter
Nov 19 '18 at 13:33