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

Question

我现在正在学习 Vuex，但运行遇到了一些麻烦。尝试在我的 vuex 实例上创建 getter 时，我在尝试从我的组件之一进行渲染时遇到此错误：

Getter should be a function but "getters.doubleCounter" is 20

store.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

我不确定是什么导致了你的错误，但你肯定不打算在突变 .

之外直接操纵 state

您的代码绝不应将任何内容直接分配给 state 属性。比如这个不好

this.$store.state.doubleCounter++

这是你应该拥有的。

Vue.component('counter', {
  template: `
  <div>
    <p>This is a message from services</p>
    <button v-on:click="increment">+</button>
    <button v-on:click="decrement">-</button>
    {{ counter }}
  </div>
  `,
  computed: {
    counter() {
      return this.$store.getters.doubleCounter;
    },
  },
  methods: {
    increment: function () {
      this.$store.commit('increment')
    },
    decrement: function () {
      this.$store.commit('decrement')
    }
  }
})

const store = new Vuex.Store({
  state: {
    counter: 10
  },
  mutations: {
    increment(state) { state.counter++ },
    decrement(state) { state.counter-- }
  },
  getters: {
    doubleCounter: state => {
      return state.counter * 2;
    }
  }
})

new Vue({
  el: '#app',
  store
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app"><counter/></div>

Answer 2

试试这个。

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

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

Getter should be a function but "getters.doubleCounter" is 20 - VUEX ERROR

javascript

vue.js

vuex

store.js

我的组件：