如何从 vuex 中的不同存储模块访问存储 state？

Question

EDIT : I found the solution which simply was passing the token as an argument in the mounted() function in my vue module:

mounted(){
    this.$store.dispatch("fetchData", this.$store.state.auth.user.token)

and in the store I use my async function like this:

async fetchData({commit}, id)

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.

this is my store:

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import auth from "./modules/auth";
import prod from "./modules/prod";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    auth,
    prod
  },
  plugins: [createPersistedState()],
});

this is my authentication module in the store:

import axios from "axios";
const state = {
  user: null,
};
const getters = {
  isAuthenticated: (state) => !!state.user,
  StateUser: (state) => state.user,
};
const actions = {
  async Register({ dispatch }, form) {
    await axios.post("user/signup", form);
    await dispatch("LogIn", form);
  },

  async LogIn({ commit }, User) {
    const response = await axios.post("user/login", User);
    console.log(response)
    await commit("setUser", response.data);
  },

  async LogOut({ commit }) {
    let user = null;
    commit("logout", user);
  },
};
const mutations = {
  setUser(state, user) {
    state.user = user;
  },
  logout(state) {
    state.user = null;
  },
};

export default {
  state,
  getters,
  actions,
  mutations,
};

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:

//store/modules/prod.js

import axios from "axios";
const state = {
    products: null,
};

const actions = {
  async fetchData({commit}) {
    const headers = {
        authorization: "Bearer " + this.$store.state.auth.user.token,
    };
    let resp = await axios.get("product", {
      headers
    });
    await commit("SET_PRODUCTS", resp.data)
  }

};
const mutations = {
  SET_PRODUCTS(state, products) {
    state.products = products
  }
};

export default {
  state,
  actions,
  mutations,
};

which I call in a component like this:

    products(){
      return this.$store.state.products
    }
   },
   mounted(){
    this.$store.dispatch("fetchData")

However, the request from the store never sends to the API because it cannot read the token. I get "cannot read undefined (reading state)

I've also tried importing it like this but it says token is undefined:

import auth from "../modules/auth"

    const headers = {
        authorization: "Bearer " + auth.user.token,
};

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?

Answer 1

Actions take a context object as parameter, you can use it to access rootState. Check documentation for other available options. https://vuex.vuejs.org/api/#actions

const actions = {
  async fetchData({commit, rootState}) {
    const headers = {
        authorization: "Bearer " + rootState.auth.user.token,
    };
    let resp = await axios.get("product", {
      headers
    });
    await commit("SET_PRODUCTS", resp.data)
  }

};