@all https://www.patreon.com/quasarframework to get things going

Docs are looking good m8!!! https://github.com/quasarframework/quasar-framework.org/tree/dev/source/guide

I do it in the scope and add classname for this in qselect

*High five!

When using the Vuex modules I was trying to use the axios plugin from inside the actions of this module.
I use the axios plugin with settings the way as described in docs.
I then have namespaced vuex modules, and inside the actions I can’t reach the this.$axios

What am I overlooking?
Or am I wrong and do I need to perform my axios calls in my vue files?

Axios plugin (axios.js):

import axios from 'axios'

export default ({ Vue }) => {
  //Vue.prototype.$axios = axios
  Vue.prototype.$axios = axios.create({
      baseURL: 'https://api.app.eu'
    }
  })
}

Store setup (store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'

import auth from './module-auth'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth
  }
})

export default store

Vuex module - index (store/module-auth/index.js)

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

Vuex module Auth - actions (store/module-auth/actions.js)
!!This is where this.$axios is not found

import { Notify, Loading } from 'quasar'
/*
export const someAction = (state) => {
}
*/
export const doLogin = (state,creds) => {
  state.commit('LOGIN')
  let email=creds.email
  let password=creds.password
  console.log(this.$axios)
  return this.$axios
    .post('/auth/signin', {
      email,
      password
    })
    .then(r => {
      //console.log(r)
      //localStorage.setItem("token", "JWT");
      commit('LOGIN_SUCCESS')
      return r
    })
    .catch(e => {
      //console.log(e.response)
      Notify.create("Error: " + e.response.status)
      //localStorage.removeItem("token")
      commit('LOGOUT')
      return e
    })
}

export const doLogout = (state) => {
  localStorage.removeItem("token")
  commit(LOGOUT)
}

Trying to dispatch it in one of my vue files:

  methods: {
  	login () {
  		this.$store.dispatch("doLogin", {
  			email: this.email,
  			password: this.password
  		})
  	}
  },

One link to rule them all: http://quasar-framework.org/support-quasar-framework.html

Again, using docs through github, they are really good! They work perfect for me! Good job!

I could add this to the payload of dispatch, but is this the correct aproach?

this.$store.dispatch("auth/doLogin", {
  			email: this.email,
  			password: this.password,
        that: this
  		})

When using the Vuex modules I was trying to use the axios plugin from inside the actions of this module.
I use the axios plugin with settings the way as described in docs.
I then have namespaced vuex modules, and inside the actions I can’t reach the this.$axios

What am I overlooking?
Or am I wrong and do I need to perform my axios calls in my vue files?

Axios plugin (axios.js):

import axios from 'axios'

export default ({ Vue }) => {
  //Vue.prototype.$axios = axios
  Vue.prototype.$axios = axios.create({
      baseURL: 'https://api.app.eu'
    }
  })
}

Store setup (store/index.js)

import Vue from 'vue'
import Vuex from 'vuex'

import auth from './module-auth'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    auth
  }
})

export default store

Vuex module - index (store/module-auth/index.js)

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

Vuex module Auth - actions (store/module-auth/actions.js)
!!This is where this.$axios is not found

import { Notify, Loading } from 'quasar'
/*
export const someAction = (state) => {
}
*/
export const doLogin = (state,creds) => {
  state.commit('LOGIN')
  let email=creds.email
  let password=creds.password
  console.log(this.$axios)
  return this.$axios
    .post('/auth/signin', {
      email,
      password
    })
    .then(r => {
      //console.log(r)
      //localStorage.setItem("token", "JWT");
      commit('LOGIN_SUCCESS')
      return r
    })
    .catch(e => {
      //console.log(e.response)
      Notify.create("Error: " + e.response.status)
      //localStorage.removeItem("token")
      commit('LOGOUT')
      return e
    })
}

export const doLogout = (state) => {
  localStorage.removeItem("token")
  commit(LOGOUT)
}

Trying to dispatch it in one of my vue files:

  methods: {
  	login () {
  		this.$store.dispatch("doLogin", {
  			email: this.email,
  			password: this.password
  		})
  	}
  },

Thank you!

Hello,

In 0.15 where to place the axios defaults?
For example:

defaults.baseURL = ‘https://api.somewhere.com’
or
the defaults.headers.common[‘x-custom-token’] = ‘i1’

Where should I put this in the new pwa structure?

Thanks

Ok, roger that!

Woooohooooow! Good job!

Again, using docs through github, they are really good! They work perfect for me! Good job!

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>

Docs are looking good m8!!! https://github.com/quasarframework/quasar-framework.org/tree/dev/source/guide

High five