javascript - 如果组件中有 getter，如何更改 v-overlay 的值？

Question

在 Vue.js 应用程序的组件中，我从 Vuex 存储中获取信息。在该组件内部，我想显示 v-overlay (预加载器)直到存储中的数据不可用。如何正确制作它？

<template>

  <v-navigation-drawer
    v-model="open"
    absolute
    right>

    <v-overlay
      :absolute="absolute"
      :opacity="opacity"
      :value="overlay">

      <v-progress-circular
        indeterminate
        size="64">
      </v-progress-circular>

    </v-overlay>

    <v-checkbox
      v-if="!overlay"
      hide-details
      v-model="selectedGenders"
      v-for="gender in genders"
      :label="gender"
      :value="gender"
      :key="gender">
    </v-checkbox>

    <v-checkbox
      v-if="!overlay"
      hide-details
      v-model="selectedIncomeRanges"
      v-for="incomeRange in incomeRanges"
      :label="incomeRange"
      :value="incomeRange"
      :key="incomeRange">
    </v-checkbox>

  </v-navigation-drawer>

</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'

export default {
  name: 'RightNavigationDrawer',
  props: {
    open: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      absolute: true,
      opacity: 0.8,
      overlay: true,
      selectedGenders: [],
      selectedIncomeRanges: []
    }
  },
  mounted () {
    this.getGenders()
    this.getIncomeRanges()
  },
  computed: mapGetters('customStore', [
    'genders',
    'incomeRanges'
  ]),
  methods: mapActions('customStore', [
    'getGenders',
    'getIncomeRanges'
  ])
}
</script>

Answer 1

理想情况下，您将跟踪 vuex 中的 loading 状态，以便它在您的所有组件中都可用，就像您的其他 vuex 状态一样。在您的商店中，创建一个 loading bool 状态。接下来，创建一个将在组件中调用的加载操作，例如:

loadData({ commit, dispatch }) {
  commit('SET_LOADING', true);
  const loader1 = dispatch('getGenders')
  const loader2 = dispatch('getIncomeRanges')
  Promise.all([loader1, loader2]).then(() => {
    commit('SET_LOADING', false);
  })
}

Promise.all 从您的加载操作中获取一系列 promise ，并且在所有这些 promise 都已解决之前不会解决。只需确保您的 getGenders 和 getIncomeRanges 操作也返回 promise 。现在，在您的组件中，仅映射 loading 和 loadData:

...mapState('customStore', ['loading']),
...mapActions('customStore', ['loadData'])

更改 mounted 以调用此操作:

mounted() {
  this.loadData()
}

现在您可以在任何地方检查loading，而不是在所有组件中检查overlay。这是一个更好的模式，因为现在 loading 只在 vuex 中与您的其他状态一起存储一次，并且在您的所有组件中都可用，而不是在本地管理和传递。

Here is a demo我在其中模拟带有超时的 AJAX 调用。 (该示例使用单个文件来管理 vuex + vue，因此看起来会略有不同，但应该不会太难理解。)