구성 요소에서 getter를 사용할 수 있는 경우 v-overlay 값을 변경하려면 어떻게 해야 합니까?

구성 요소에서 getter를 사용할 수 있는 경우 v-overlay 값을 변경하려면 어떻게 해야 합니까?

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>

이상적으로는, 다음의 데이터를 추적합니다.loading상태를 vuex로 표시하여 다른 vuex 상태와 같이 모든 구성 요소에서 사용할 수 있도록 합니다.스토어에서 다음 항목을 만듭니다.loading부울 상태다음으로 다음과 같이 컴포넌트에서 호출되는 로드 액션을 만듭니다.

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로딩 액션으로부터 일련의 약속을 받아, 이러한 약속이 모두 해결될 때까지 해결되지 않습니다.이 모든 걸 확실하게getGenders그리고.getIncomeRanges행동은 약속도 돌려준다.이제 컴포넌트에서는 맵만loading그리고.loadData:

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

바꾸다mounted이 액션을 호출하려면:

mounted() {
  this.loadData()
}

이제 확인할 수 있습니다.loading대신 어디든지overlay모든 컴포넌트에서 사용할 수 있습니다.이것은 우수한 패턴입니다. 왜냐하면 지금은loading는 다른 상태와 함께 vuex에 한 번만 저장되며 로컬로 관리 및 전달되지 않고 모든 구성 요소에서 사용할 수 있습니다.

이것은 타임아웃으로 AJAX 콜을 시뮬레이트하는 데모입니다.(이 예에서는 단일 파일을 사용하여 vuex + vue를 관리하고 있기 때문에 약간 다르게 보이지만 쉽게 따라할 수 있습니다.)

시계를 차다overlay(Vuex 스토리지에서 가져옵니다).예를 들어 이 값은this.overlay = true

watch: {
    overlay (val) {
      val && setTimeout(() => {
        this.overlay = false
      }, 3000)
    },
  },

코드펜 팔로우

언급URL : https://stackoverflow.com/questions/59102489/how-to-change-the-value-of-v-overlay-if-getters-are-available-in-component