Vuex跨模块访问store状态及API调用token获取问题

错误原因分析 #

1. Vuex的action上下文里不存在this.$store，直接访问会触发"cannot read undefined (reading state)"错误。
2. 直接导入auth模块文件读取auth.user无效——模块导出的是状态配置对象，并非运行时的store实例状态，无法同步登录后的实际用户数据。

正确实现方式 #

方式一：通过action上下文的rootState访问跨模块状态 #

在prod模块的action中，解构出rootState参数，直接获取auth模块的状态：

// store/modules/prod.js
import axios from "axios";
const state = {
    products: null,
};

const actions = {
  async fetchData({ commit, rootState }) {
    // 先判断用户是否登录，避免token不存在报错
    if (!rootState.auth.user) {
      console.error("用户未登录");
      return;
    }
    const headers = {
        authorization: "Bearer " + rootState.auth.user.token,
    };
    const resp = await axios.get("product", { headers });
    commit("SET_PRODUCTS", resp.data);
  }
};

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

export default {
  state,
  actions,
  mutations,
};

方式二：通过rootGetters访问跨模块getters（推荐） #

auth模块已定义StateUser getter，利用rootGetters获取用户数据更符合Vuex设计规范（用getters封装状态访问，而非直接读取state）：

// store/modules/prod.js
import axios from "axios";
const state = {
    products: null,
};

const actions = {
  async fetchData({ commit, rootGetters }) {
    const user = rootGetters.StateUser;
    if (!user) {
      console.error("用户未登录");
      return;
    }
    const headers = {
        authorization: "Bearer " + user.token,
    };
    const resp = await axios.get("product", { headers });
    commit("SET_PRODUCTS", resp.data);
  }
};

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

export default {
  state,
  actions,
  mutations,
};

进阶优化：全局配置axios请求拦截器 #

若多个模块的API请求都需携带token，可在项目入口文件（如main.js）配置拦截器自动添加token，避免重复代码：

// main.js
import axios from "axios";
import store from './store';

axios.interceptors.request.use(config => {
  const user = store.state.auth.user;
  if (user?.token) {
    config.headers.authorization = `Bearer ${user.token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

之后prod模块的action可简化为：

async fetchData({ commit }) {
  // 拦截器自动处理token
  const resp = await axios.get("product");
  commit("SET_PRODUCTS", resp.data);
}

内容的提问来源于stack exchange，提问作者user16779293