title: How to separate AXIOS requests from a Vuex store
body: <p>I have a very normal <strong>Vuex store file</strong> and here is the code:</p>
  
  <pre><code>//store.js
  import Vue from 'vue';
  import Vuex from 'vuex';
  
  
  Vue.use(Vuex);
  
  export const store = new Vuex.Store({
    state: {
      loading: true,
      companyBasicInfo: [
  
      ]
    },
    mutations: {
      getCompanyBasicInfo: (state, res) =&gt; {
        state.companyBasicInfo.push(res);
      },
      changeLoadingStatue: (state, loading) =&gt; {
        state.loading = loading;
      }
    },
    actions: {
      getCompanyBasicInfo: context =&gt; {
  // HERE IS MY AXIOS REQUESTS
      }
    }
  });
  </code></pre>
  
  <p>I am writing my axios request in <strong>getCompanyBasicInfo()</strong> actions and everything works perfectly.</p>
  
  <h2>What I want to do</h2>
  
  <p>Separate my <strong>AXIOS</strong> requests in another file and just call them in my store.js file just to reduce my store.js file..</p>
  
  <h2>What I have tried</h2>
  
  <p>I have tried to create file called <strong>requests.js</strong> and write this code in it:</p>
  
  <pre><code>import axios from 'axios';
  
  export default GET_COMPANY_DETAILS = () =&gt; {
    setTimeout(() =&gt; {
      axios.get('http://localhost:3000/companies/show/trade key egypt').then((res) =&gt; {
        context.commit('getCompanyBasicInfo', res.data);
        context.commit('changeLoadingStatue', false);
      }).catch(e =&gt; {
        console.log(e);
      });
    }, 3000);
  };
  </code></pre>
  
  <p>And then trying to import them in my store.js file</p>
  
  <pre><code>import requests from './requests';
  </code></pre>
  
  <h2>Problem</h2>
  
  <p>Whenever I try to write <code>requests.GET_COMPANY_DETAILS();</code> in my <code>getCompanyBasicInfo()</code> action I couldn't access the method in the <code>requests.js</code> file.</p>
  
  <h2>ERROR I get</h2>
  
  <p><code>Uncaught ReferenceError: GET_COMPANY_DETAILS is not defined</code> in console</p>