突变未定义的Vuex答案

【问题标题】：Mutations undefined Vuex突变未定义的Vuex
【发布时间】：2018-07-23 15:17:52
【问题描述】：

我在 Vuex 中遇到了突变问题 - 在我的组件中，我通过了 getter 和突变，以便我可以使用数据。但是，getter 可以很好地传递下去，并且可以从组件中检索到，但是关于突变，它们似乎都没有定义。我有另一个具有相同设置的组件，它似乎工作正常。

这是与我遇到问题的组件相关的代码： https://codesandbox.io/s/nlpvz0y6m

到目前为止，我已经尝试通过导入整个 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>

【问题讨论】：

我的回答解决了你的问题吗？如果是，请标记为已解决。

标签： javascript vue.js vuex

【解决方案1】：

首先，您需要通过以下方式重构 Vuex 实例：

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 移动到Spin.vue 中的methods 块中：

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

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

</script>

【讨论】：