javascript - Getter 应该是一个函数，但 "getters.doubleCounter"是 20 - VUEX 错误

Question

我现在正在学习 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>

当我尝试呈现该组件所在的页面时再次出现。在控制台中给我标题错误消息时失败。任何帮助都会很棒!谢谢!

Answer 1

试试这个。

doubleCounter: (state) => {
      return state.counter * 2;
    }