Vuex use Quasar Loading

[synbits]

Hello,

I have modules in a Vuex store.
During the mutations I have states changing, with a pending state to show a Loading spinner.
Where do I listen to the state to change and show or hide the loading?

In any .vue file? How?
Or can I do it inside the vuex module?

This is my idea now inside a .vue file:

<script>
import { Loading } from 'quasar'
export default {
  name: 'PageLogin',
  data () {
  	return {
  		email:"",
  		password: ""
  	}
  },
  watch: {
    runLoading: () => {
      if(this.runLoading){
      	Loading.show()
      }else{
      	Loading.hide()
      }
    }
  },
  methods: {
  	login () {
  		console.log(this.$store)
  		this.$store.dispatch("auth/doLogin", {
  			email: this.email,
  			password: this.password
  		}).then(() => {
  			this.$router.push("/")
  		}).catch((res) => {
  			console.log(res)
  		})
  	}
  },
  computed: {
    runLoading () {
      return this.$store.state.auth.pending
    }
  }
}
</script>

[eugene]

https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/progress/loading.vue
this is a good example of how to do it from within a .vue module

[benoitranque]

Vuex commits must not be async, that is what actions are for. You can pass this as part of the payload and access the global vue instance from there

[synbits]

Ok, roger that!