is main.js replaced by boot files in Quasar ?

Incremental

Thanks a lot beets !
I use a default quasar setup.
My mutation and action are in /src/store/server.js
It worked with :

store.commit("server/API_DATA_PENDING");

Incremental

sorry, but now I get : Uncaught (in promise) TypeError: error.response is undefined

and in getApplicationsASync() at :

    } catch (error) {

      ==> error: ReferenceError : "axios is not defined"

I tried to declare “axios” first in quasar.conf.js

boot: ["axios", "i18n", "constantes", "init"],

without success…
Is it because axios boot is not already “started” ???

beets

@incremental You would have to post your axios boot file and the store’s actions.js file (to see how axios is imported) to say for sure, I’m not sure I’ve ever ran into this specific problem to say for sure.

Incremental

@beets
Axios boot file :

import Vue from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
    //SERVER_URL: "http://192.168.0.3",
})

export default ({ store, Vue }) => {
    Vue.prototype.$axios = axiosInstance
    store.$axios = axiosInstance
}

Store server.js :

import { constantes } from "boot/constantes.js";
import { Notify } from 'quasar';

const actions = {
   async getApplicationsASync ({ commit }) {
      try {
         commit("API_DATA_PENDING");
         let response = await axios.get(
            constantes.SERVER_URL + "/ApplisByDomains"
         );
         commit("API_DATA_SUCCESS");
      } catch (error) {
         if (error.message === "Network Error") {
           ...

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

Let me know if you want more code, my file is quite big now…

beets

@incremental said in is main.js replaced by boot files in Quasar ?:

let response = await axios.get(

This line here should be

let response = await this.$axios.get(

Because you attach $axios to the store object, and just referring to it as axios is undefined.

Another way people do it is

boot file:

import Vue from 'vue'
import axios from 'axios'

const axiosInstance = axios.create({
    //SERVER_URL: "http://192.168.0.3",
})

export default ({ store, Vue }) => {
    Vue.prototype.$axios = axiosInstance
    store.$axios = axiosInstance
}

export { axiosInstance  }

Action:

import { constantes } from "boot/constantes.js";
import { Notify } from 'quasar';
import { axiosInstance } from 'boot/axios';

const actions = {
   async getApplicationsASync ({ commit }) {
      try {
         commit("API_DATA_PENDING");
         let response = await axiosInstance.get(
            constantes.SERVER_URL + "/ApplisByDomains"
         );
         commit("API_DATA_SUCCESS");
      } catch (error) {
         if (error.message === "Network Error") {
           ...

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

Incremental

@beets
Hello beets, I still have a question about syntax…
As my server.js code is quite long because of my APIs, I decided to simplify it and to create a function to handle axios error codes.

I modified my server.js with :

import { constantes } from "boot/constantes.js";
import { Notify } from 'quasar';

const mutations = {
   SET_SERVER_ERRORS: (state, serverErrors) => {
      state.serverErrors = serverErrors;
   },
},

const actions = {
   async getApplicationsASync ({ commit }) {
      try {
         commit("API_DATA_PENDING");
         let response = await axios.get(
            constantes.SERVER_URL + "/ApplisByDomains"
         );
         commit("API_DATA_SUCCESS");
      } catch (error) {
                  errors = errorMgt(error);
                  commit("API_DATA_FAILURE", errors);
      },
};

function errorMgt (error) {
   commit("SET_SERVER_ERRORS", null);
   console.log('Axios errors : ', errors);
   return errors;
};

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

Why do I get in errorMgt() an error “Uncaught (in promise) ReferenceError: commit is not defined” ?
I tried to use this.commit or this.$store.commit without success

beets

@incremental commit isn’t defined in function errorMgt. I’m not exactly sure what you’re intending to do with that function, since variable errors is also undefined. But if you wanted to use commit there, do something like:

      } catch (error) {
                  errors = errorMgt(error, commit); // pass commit function
                  commit("API_DATA_FAILURE", errors);
      }

function errorMgt (error, commit) { // accept commit as a parameter
   commit("SET_SERVER_ERRORS", null);
   console.log('Axios errors : ', errors);
   return errors;
};

Incremental

@beets
I haven’t pasted all the code. The idea is to factorise all the same axios error mgt among all my API calls.

You’re right, the errors variable was undefined…
I was missing the commit in the call !
Like for getApplicationsASync() syntax, I tried previously :

function errorMgt ({ commit }, error) {}

it works now with :

function errorMgt (commit, error) {}

What is the difference with { } ???

beets

@incremental The {} is called destructuring assignment. In a nutshell, if you defined:

function errorMgt ({ commit }, error) {}

Then you’d call it like:

errorMgt ({ commit }, error)
// or

const someObj = {
  commit: commit
}
errorMgt (someObj, error)

Incremental

@beets I understand that it permit to chose a parameter in an array at the call.
It’s unnecessary in my case.
Thanks a lot for your great help and explanations. People like you makes others to progress !!!
Thanks again

No More Posting New Topics!

is main.js replaced by boot files in Quasar ?