Question

我对Vuex中的突变有疑问-在我的组件中，我已经通过了吸气剂和突变，以便可以使用数据。但是，吸气剂传递得很好，可以从组件中检索，但是对于突变，它们似乎都不确定。我有另一个具有相同设置的组件，它似乎工作正常。

这是与我有问题的组件相关的代码： 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>

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

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

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

</script>

不确定的Vuex变异

1 个答案: