title: How to access store state from a different store module in vuex?
body: <p><strong>EDIT</strong>: I found the solution which simply was passing the token as an argument in the mounted() function in my vue module:</p>
  <pre><code>mounted(){
      this.$store.dispatch(&quot;fetchData&quot;, this.$store.state.auth.user.token)
  </code></pre>
  <p>and in the store I use my async function like this:</p>
  <pre><code>async fetchData({commit}, id)
  </code></pre>
  <p>I want to make API calls from my store but I also have the user information (userId, jwttoken) necessary for those API calls stored in the same place .</p>
  <p>this is my store:</p>
  <pre><code>import Vue from &quot;vue&quot;;
  import Vuex from &quot;vuex&quot;;
  import createPersistedState from &quot;vuex-persistedstate&quot;;
  import auth from &quot;./modules/auth&quot;;
  import prod from &quot;./modules/prod&quot;;
  
  Vue.use(Vuex);
  
  export default new Vuex.Store({
    modules: {
      auth,
      prod
    },
    plugins: [createPersistedState()],
  });
  </code></pre>
  <p>this is my authentication module in the store:</p>
  <pre><code>import axios from &quot;axios&quot;;
  const state = {
    user: null,
  };
  const getters = {
    isAuthenticated: (state) =&gt; !!state.user,
    StateUser: (state) =&gt; state.user,
  };
  const actions = {
    async Register({ dispatch }, form) {
      await axios.post(&quot;user/signup&quot;, form);
      await dispatch(&quot;LogIn&quot;, form);
    },
  
    async LogIn({ commit }, User) {
      const response = await axios.post(&quot;user/login&quot;, User);
      console.log(response)
      await commit(&quot;setUser&quot;, response.data);
    },
  
    async LogOut({ commit }) {
      let user = null;
      commit(&quot;logout&quot;, user);
    },
  };
  const mutations = {
    setUser(state, user) {
      state.user = user;
    },
    logout(state) {
      state.user = null;
    },
  };
  
  export default {
    state,
    getters,
    actions,
    mutations,
  };
  </code></pre>
  <p>and this is where I want to call it in a different store file, with the line this.$store.state.auth.user.token to get the token necessary for the API call:</p>
  <pre><code>//store/modules/prod.js
  
  import axios from &quot;axios&quot;;
  const state = {
      products: null,
  };
  
  const actions = {
    async fetchData({commit}) {
      const headers = {
          authorization: &quot;Bearer &quot; + this.$store.state.auth.user.token,
      };
      let resp = await axios.get(&quot;product&quot;, {
        headers
      });
      await commit(&quot;SET_PRODUCTS&quot;, resp.data)
    }
  
  };
  const mutations = {
    SET_PRODUCTS(state, products) {
      state.products = products
    }
  };
  
  export default {
    state,
    actions,
    mutations,
  };
  </code></pre>
  <p>which I call in a component like this:</p>
  <pre><code>    products(){
        return this.$store.state.products
      }
     },
     mounted(){
      this.$store.dispatch(&quot;fetchData&quot;)
  </code></pre>
  <p>However, the request from the store never sends to the API because it cannot read the token. I get &quot;cannot read undefined (reading state)</p>
  <p>I've also tried importing it like this but it says token is undefined:</p>
  <pre><code>import auth from &quot;../modules/auth&quot;
  
      const headers = {
          authorization: &quot;Bearer &quot; + auth.user.token,
  };
  </code></pre>
  <p>I've read online that you should access the store from non vue modules through Getters but I couldn't manage to make it work either, would this be the correct way to go though?</p>