Using plugin quasar/vue in Vuex

[danielsalles]

Hello, I need to use the axios plugin in my setup within a Vuex action.

import axios from 'axios'

export default ({ Vue }) => {
  const instance = axios.create({
    baseURL: 'http://localhost:3333/',
    timeout: 15000,
    headers: {
      'Content-Type': 'multipart/form-data',
      'Accept': 'application/json'
    }
  })
  Vue.prototype.$httpAPI = instance
}

I do not know how I can make this call inside my Vuex/Actions.

export const getMe = ({ commit, state }, payload) => {
  const axios = this.$httpAPI // :/
  commit(basicInfoUser, 'espera')
}

[Max]

just import it

import axios from 'axios'

export function register ({commit}, form) {
  return axios.post('api/auth/register', form)
    .then(response => {
      commit('login', {token: response.data.token, user: response.data.user})
    })
}

[benoitranque]

You can access Vuex’s vue instance using this._vm. Since you added to the Vue prototype, you can access your axios instance using this._vm.$httpAPI

[danielsalles]

@benoitranque It is returning undefined.

export const getMe = ({ commit, state }, payload) => {
  console.log('VM', this._vm) // return undefined
  commit(basicInfoUser, 'espera')
}

Do I have to change anything else?

[danielsalles]

@max But the idea is to use the instance that I created earlier. And not a new instance, understand?

[benoitranque]

Sorry I had to be more specific. this._vm is only available after store has been initiated. Try running it in an action called from vue

[danielsalles]

@benoitranque Do you speak pass this in payload? I do not understand very well, hehehe.

[benoitranque]

No I do not. Try this here, dispatch that action from a vue component

[danielsalles]

@benoitranque Sorry, but I do not understand. I’m doing this.

/*
export const someAction = (state) => {}
 */

export const getMe = ({ commit, state }, payload) => {
  console.log('VM', this._vm.$httpAPI) // :/
  commit(basicInfoUser, 'espera')
}

console.log

[danielsalles]

But how does someone solve this problem?

[sumpfgottheit]

I was able to achieve it using classic function definitions:

store/keys/actions.js:

export async function refreshKeys({commit}) {
    const keys = await this._vm.$axios.get('path/to/api')
    commit('setKeys', keys.data)
}

@danielsalles : Hope this helps

[rstoenescu]

The App Plugins docs page has been updated to better explain it. Make sure you read it again. (Refresh browser if you feel it’s served from cache).