состояние 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>

Я использую сторонний загрузочный счетчик с именем Epi c Spinners Я обернул это, чтобы обеспечить тот же стиль и расположение для нескольких других компонентов.

Вот как выглядит мой магазин для 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,
};

я хочу переключить счетчик на true до того, как будет запущен вызов ax ios, и переключиться обратно на false, когда будет выполнен ax ios.

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

проблема теперь в том, что счетчик не реагирует и не будет переключаться на истину или ложь. вычисляемое свойство, которое я определяю внутри LoadingSpinner.vue' is undefined`.

Answer 1

Я не уверен, когда вы используете mapState, тогда почему вы получаете доступ через $store.

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

}

Теперь вы можете просто использовать свойство reactive.

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

Answer 2

Ваш атрибут состояния называется isLoading, но вы получаете доступ к loading

Должно быть

this.$store.state.isLoading