[英]Mutations undefined Vuex
I have an issue with mutations in Vuex - In my component I have passed the getters and mutations, so that I can used the data. 我有一个Vuex突变的问题 - 在我的组件中,我已经通过了getter和突变,因此我可以使用这些数据。 However, the getters are getting passed down just fine and can be retrieved from the component, but regarding the mutations, they all seem to be getting undefined. 然而,getter传递得很好并且可以从组件中检索,但是关于突变,它们似乎都未定义。 I have another component with identical setup, which seems to work fine. 我有另一个相同设置的组件,似乎工作正常。
Here is the code related to the component I have an issue with: https://codesandbox.io/s/nlpvz0y6m 以下是与我遇到问题的组件相关的代码: https : //codesandbox.io/s/nlpvz0y6m
So far, I have tried retrieving the data by importing the whole store
but it isn't what I must do and not optimal. 到目前为止,我已经尝试通过导入整个store
检索数据,但这不是我必须做的而不是最佳的。
Please advise further. 请进一步说明。
store : 商店 :
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
stats: {
controls: {
spin: false
}
},
getters: {
isSpinning: state => {
return state.controls.spin;
}
},
mutations: {
spinIt(state) {
return (state.controls.spin = !state.controls.spin);
}
}
}
});
component : 组件 :
<template>
<div>
<div class="spin">
<span @click="spinIt">SPIN</span>
</div>
</div>
</template>
<script>
import {mapMutations} from 'vuex';
import {mapGetters} from 'vuex';
export default {
name: 'Stake',
computed: {
...mapMutations(['spinIt']),
...mapGetters(['isSpinning'])
}
}
</script>
First you need restructure the Vuex
instance by the following: 首先,您需要通过以下方式重构Vuex
实例:
export const store = new Vuex.Store({
state: {
stats: {
controls: {
spin: false
}
},
},
getters: {
isSpinning: state => {
return state.stats.controls.spin;
}
},
mutations: {
spinIt(state) {
return (state.stats.controls.spin = !state.stats.controls.spin);
}
}
});
Now you will access the getters
and mutations
. 现在您将访问getters
和mutations
。
After that, move the mapMutations
into the methods
block in your Spin.vue
: 在此之后,移动mapMutations
进入methods
在你阻止Spin.vue
:
<script>
import {mapMutations} from 'vuex';
import {mapGetters} from 'vuex';
export default {
name: 'Stake',
computed: {
...mapGetters(['isSpinning'])
},
methods: {
...mapMutations(['spinIt'])
}
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.