정의되지 않은 Vuex 돌연변이

정의되지 않은 Vuex 돌연변이

Vuex의 돌연변이에 문제가 있습니다.내 컴포넌트에서는 데이터를 사용할 수 있도록 getters와 돌연변이를 통과했습니다.다만, Getters는 정상적으로 전달되어 컴포넌트에서 취득할 수 있지만, 돌연변이에 대해서는 모두 정의되지 않는 것 같습니다.동일한 설정으로 다른 컴포넌트가 있는데 정상적으로 동작하고 있는 것 같습니다.

문제가 있는 컴포넌트와 관련된 코드는 다음과 같습니다.https://codesandbox.io/s/nlpvz0y6m

지금까지 데이터 전체를 Import하여 데이터 검색을 시도했습니다.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);
      }
    }
  }
});

컴포넌트:

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

먼저, 시스템 재구성이 필요합니다.Vuexinstance는 다음과 같습니다.

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);
    }
  }
});

이제 에 접속합니다.getters그리고.mutations.

그 후, 그 다음,mapMutations에methods방해하다Spin.vue:

<script>
  import {mapMutations} from 'vuex';
  import {mapGetters} from 'vuex';

  export default {
    name: 'Stake',
    computed: {
      ...mapGetters(['isSpinning'])
    },
    methods: {
      ...mapMutations(['spinIt'])
    }
  }

</script>

언급URL : https://stackoverflow.com/questions/51482194/mutations-undefined-vuex