我现在正在学习 Vuex,但遇到了一些麻烦。尝试在我的 vuex 实例上创建 getter
时,我在尝试从我的组件之一进行渲染时遇到此错误:
Getter should be a function but "getters.doubleCounter" is 20
商店.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 10
},
getters: {
doubleCounter: state => {
return state.counter * 2;
}
}
});
我的组件:
<template>
<div>
<p>This is a message from services</p>
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
{{ counter }}
</div>
</template>
<script>
export default {
computed: {
counter() {
return this.$store.getters.doubleCounter;
},
},
methods: {
increment: function () {
this.$store.state.counter++
},
decrement: function () {
this.$store.state.counter--
}
}
}
</script>
当我尝试呈现该组件所在的页面时再次出现。在控制台中给我标题错误消息时失败。任何帮助都会很棒!谢谢!
最佳答案
试试这个。
doubleCounter: (state) => {
return state.counter * 2;
}
关于javascript - Getter 应该是一个函数,但 "getters.doubleCounter"是 20 - VUEX 错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48575838/