vuex状态不是反应性的

Question

我正在用vuex做一个加载旋转器的条件来处理。loading = true/false 在多个组件上。

LoadingSpinner.vue

<template>
  <fulfilling-square-spinner
    v-show="loading"
    class="loading-spinner"
    :animation-duration="4000"
    :size="50"
    color="#007bff"
  />
</template>

<script>
import { FulfillingSquareSpinner } from 'epic-spinners';
import { mapState } from 'vuex';
export default {
  components: {
    FulfillingSquareSpinner
  },
  computed: {
    ...mapState({}),
    loading: function() {
      return this.$store.state.isloading;
    }
  },
}
</script>

<style lang="scss" scoped>
  .loading-spinner {
    z-index: 1;
    position: absolute;
    top: 315px;
    left: 0;
    right: 0;
    margin: auto;
  }
</style>

我正在使用一个第三方的加载微调器，叫做 史诗纺纱机我把它包装起来，在其他几个组件上提供同样的风格和定位。

这就是我的LoadingSpinner商店的样子。

const state = {
  data() {
    return {
      isLoading: false
    }
  },
};
const getters = {};
const actions = {};
const mutations = {
  loading(state, isLoading) {
    console.log({isLoading})
    if (isLoading) {
      state.isLoading = true;
    } else {
      state.isLoading = false;
    }
  }
};
export default {
  state,
  getters,
  actions,
  mutations,
};

我想在axios调用开始前将spinner切换为true，当axios调用完成后再切换为false。

this.$store.commit('loading', true);
or 
this.$store.commit('loading', false);

现在的问题是，spinner不是反应式的，不会切换到true或false。LoadingSpinner.vue' isundefined`.

Answer 1

你的状态属性叫做 isLoading 但您访问的是 loading

应该是

this.$store.state.isLoading

Answer 2

我不知道你什么时候用的是 mapState那你为什么要通过 $store.

computed: {
  ...mapState(['isLoading'])
  // You can access `isLoading` as a property of `this` ex - this.isLoading

}

现在你可以简单地使用反应式属性。

<template>
  <fulfilling-square-spinner
    v-show="isLoading"
    class="loading-spinner"
    :animation-duration="4000"
    :size="50"
    color="#007bff"
  />
</template>

你也可以使用 mapMutations 对于 mutations 太

methods: {
  ...mapMutations(['loading'])
  // it's get mapped as this.$store.commit('loading') and you can use as a property of this

  // this.loading()
}