Vuex use Quasar Loading



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




  • 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



  • Ok, roger that!