vuex报错 state未定义

Question

vuex文件

const user = {
  state: () => ({
      userInfo: {

      }
    }

  ),
  mutations: {
    increment(v) {
      this.userInfo = v;
    }
  },
  actions: {
    increment(context,value) {
      context.commit("increment",value);
    }
  }
};
export default user;

import { createStore } from 'vuex'
import user from './user'
// 创建一个新的 store 实例
const store = createStore({
  state() {},
  mutations: {},
  actions: {},
  modules: {
    user
  }
})

export default store

request.js文件

import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();

// 创建一个axios实例
const service = axios.create({
  // 基地址
  baseURL: import.meta.env.VITE_APP_BASE_URL,
  //超时时间 单位毫秒
  timeout: 10000
});
service.defaults.withCredentials = true;


// 请求拦截器 请求成功执行第一个，失败第二个
service.interceptors.request.use(
  (config) => {
    //获取token
    config.headers.token=store.state.user.userInfo.token || "";
    return config;
  },
  (error) => {
    console.log("请求失败");
    return Promise.reject(error);
  }
);

在vue组件中可以这样使用，但是js文件中这样用就报错了

如何解决呀？

Answer 1

Vue 组件中可以访问到 Vuex 中的 state，但是将 Vuex 相关的代码放入独立的 JavaScript 文件中可能会导致无法直接访问到 Vuex 的 state。这是因为在独立的 JavaScript 文件中，默认情况下无法直接访问到 Vue 组件实例的内容，包括 Vuex 中的状态。

一种解决方法是将需要使用 Vuex state 的 JavaScript 代码放入 Vue 组件内部或者将其作为 Vue 组件的一部分来使用。这样可以确保代码能够访问到 Vue 实例中的 Vuex 状态。

如果你希望在独立的 JavaScript 文件中使用 Vuex 的状态，你需要通过其他方式获取 Vuex 的实例。例如，在你的 JavaScript 文件中导入 Vuex 的 store 实例，然后使用它来访问 Vuex 的 state。

以下是一个示例，展示了如何在独立的 JavaScript 文件中使用 Vuex 的 state：

在 Vue 组件中：

然后，在 JavaScript 文件中

这样，你就可以在独立的 JavaScript 文件中使用 myJavaScriptCode.accessVuexState() 方法来访问 Vuex 的 state 了。