What is the process to update the v-overlay value using component getters?

Question

What is the process to update the v-overlay value using component getters?

When working with a Vue.js application component that retrieves information from Vuex storage, I need to display a v-overlay (preloader) until the data from storage becomes available. What is the correct approach to achieve this?

<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>

javascript vue.js vuejs2 vuex vuetify.js

Answer 1

Answer №1

It's best practice to maintain the status of loading in vuex so that it can be accessed across all components just like any other vuex state. Start by setting up a boolean state called loading in your store. Then, create a loading action which can be triggered in the component as follows:

fetchData({ commit, dispatch }) {
  commit('SET_LOADING', true);
  const loader1 = dispatch('fetchUsers')
  const loader2 = dispatch('fetchPosts')
  Promise.all([loader1, loader2]).then(() => {
    commit('SET_LOADING', false);
  })
}

The Promise.all method takes an array of promises from your loading actions and waits for all of them to resolve before continuing. Make sure that your fetchUsers and fetchPosts actions also return promises. Now, in your component, only map the loading and fetchData actions:

...mapState('myStore', ['loading']),
...mapActions('myStore', ['fetchData'])

Update the lifecycle hook mounted to call the fetchData action:

mounted() {
  this.fetchData()
}

With this setup, you can easily access the loading status throughout your components without managing it separately. This approach ensures that the loading state is centralized in vuex along with other states, making it readily available across your components.

For a demonstration, you can check out this demo which simulates asynchronous calls using timeouts. (Note that the example combines vuex and vue in a single file, so the structure may appear a bit different but is easy to follow.)

Answer 2

It's best practice to maintain the status of loading in vuex so that it can be accessed across all components just like any other vuex state. Start by setting up a boolean state called loading in your store. Then, create a loading action which can be triggered in the component as follows:

fetchData({ commit, dispatch }) {
  commit('SET_LOADING', true);
  const loader1 = dispatch('fetchUsers')
  const loader2 = dispatch('fetchPosts')
  Promise.all([loader1, loader2]).then(() => {
    commit('SET_LOADING', false);
  })
}

The Promise.all method takes an array of promises from your loading actions and waits for all of them to resolve before continuing. Make sure that your fetchUsers and fetchPosts actions also return promises. Now, in your component, only map the loading and fetchData actions:

...mapState('myStore', ['loading']),
...mapActions('myStore', ['fetchData'])

Update the lifecycle hook mounted to call the fetchData action:

mounted() {
  this.fetchData()
}

With this setup, you can easily access the loading status throughout your components without managing it separately. This approach ensures that the loading state is centralized in vuex along with other states, making it readily available across your components.

For a demonstration, you can check out this demo which simulates asynchronous calls using timeouts. (Note that the example combines vuex and vue in a single file, so the structure may appear a bit different but is easy to follow.)

Answer 3

Answer №2

Make sure to monitor the overlay variable in Vuex storage. Let's assume its value is this.overlay = true

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

Check out this CodePen link

Answer 4

Make sure to monitor the overlay variable in Vuex storage. Let's assume its value is this.overlay = true

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

Check out this CodePen link

What is the process to update the v-overlay value using component getters?

Answer №1

Answer №2

Similar questions

Displaying a loading spinner while waiting for the Vue.js app to render

The stylesheet_pack_tag seems to be malfunctioning as it is not producing any output, despite the fact that the CSS file exists

Warning: Using synchronous XMLHttpRequest on the main thread is no longer recommended as it can negatively impact the user's experience

Jquery script that utilizes the Steam WebAPI to return data

I am struggling to comprehend the code for a PHP form that triggers a JS OnUpdate event, which then uses AJAX to retrieve data from MySQLi

The middleware for express body-parser stores information in the "name" property

Angular reactive forms can be customized to include a patched version of the matTime

What is the best way to display components in VueJS?

Activate continuous speech identification

What are some solutions for resolving the issue of a neutralino white screen?

Declining the request to incorporate an external website into my web platform

Guide to generating a PDF file and utilizing a Node.js program for the download process

send array to the sort function

Changing color based on AngularJS condition using CSS

Check the length of a ngRepeat array after the initial filtering before applying limitTo for further refinement

Having issues with setting up nodejs on kali linux

Issue with Google Charts where the label does not show outside of the bar if the bar is too small

Manipulate classes based on scrolling (Wordpress)

Sending Dual Parameters to PHP File Using AJAX

Having difficulty creating a shadow beneath a canvas displaying Vega charts