Getter는 함수여야 하지만 "getters.doubleCounter"는 20 - VUEX 오류입니다.

Getter는 함수여야 하지만 "getters.doubleCounter"는 20 - VUEX 오류입니다.

저는 지금 Vuex에 대해 배우고 있는데 문제가 생겼습니다.생성을 시도하는 동안gettervuex 인스턴스에서 구성 요소 중 하나에서 렌더링을 시도할 때 다음 오류가 발생합니다.

Getter는 함수여야 하지만 "getter.doubleCounter"는 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>

이 구성 요소가 있는 페이지를 렌더링하려고 할 때도 마찬가지입니다.콘솔에서 제목 오류 메시지를 표시하는 동안 실패합니다.어떤 도움이든 좋습니다!감사합니다!

이거 먹어봐요.

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

무엇이 당신의 오류를 유발하는지는 모르겠지만 당신이 직접 조작할 의도는 분명히 아닙니다.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>

언급URL : https://stackoverflow.com/questions/48575838/getter-should-be-a-function-but-getters-doublecounter-is-20-vuex-error