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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.