Vuejs with axios request in vuex store: can't make more than one request, why?

Question

I\'m building some vuejs dashboard with vuex and axios, between others, and I\'ve been struggling for a while on a pretty pesky problem: it seems I can\'t make more than one

Answer 1

your code seems very correct, i think that your problem is from the API.
You should try with another one, just to make sure :)

Answer 2

Well, played a bit more with axios config and manage to make it work (finally!). I just created a axios instance used by my store, and the weird header problem thingy disappeared! I'm not exactly sure why, but seems to be because of some things going on in the default axios config between my calls...

Even if not much has changed, the new store code:

import axios from "axios";

const state = {
  rawData1: null,
  rawData2: null
};

const api = axios.create({ // Yep, that's the only thing I needed...
  baseURL: "/api"
});

const actions = {
  FETCH_DATA1: ({ commit }) =>
  {
    if (!state.rawData1)
      return api.get("/data1") // Little change to use the axios instance.
      .then((response) =>
      {
        commit("SET_RAW_DATA1", response.data);
      });
  },

  FETCH_DATA2: ({ commit }) =>
  {
    if (!state.rawData2)
      return api.get("/data2") // And there too. Done. Finished. Peace.
      .then((response) =>
      {
        commit("SET_RAW_DATA2", response.data);
      });
  }
};

const mutations = {
  SET_RAW_DATA1: (state, data) =>
  {
    state.rawData1 = data;
  },

  SET_RAW_DATA2: (state, data) =>
  {
    state.rawData2 = data;
  }
};

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

Hope that'll help someone!