Vue项目中如何从其他Vue文件访问Auth模块的接口数据？

开发者阿泽

2026-8-5

在Vue项目中从Auth模块访问用户信息的实现方案

根据你提供的Vuex Auth模块代码，要在其他Vue组件或文件中访问user对象的name、surname和email，可以按以下步骤操作：

1. 确保Auth模块已注册到Vuex Store

首先要保证你的ExAuthModule已经正确注册到Vuex的store中，示例代码如下（以store/index.ts为例）：

import Vue from 'vue';
import Vuex from 'vuex';
import { createModule } from 'vuex-module-decorators';
import ExAuthModule from './modules/auth';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    auth: createModule(ExAuthModule)
  }
});

export default store;

2. 在Vue组件中访问用户信息

方式一：使用`mapGetters`辅助函数

通过mapGetters映射Auth模块的currentUser getter，解构后直接获取用户属性：

<template>
  <div>
    <p>姓名：{{ user.name }} {{ user.surname }}</p>
    <p>邮箱：{{ user.email }}</p>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { mapGetters } from 'vuex';

export default Vue.extend({
  computed: {
    ...mapGetters('auth', ['currentUser']),
    user() {
      return this.currentUser;
    }
  }
});
</script>

方式二：直接通过`$store`访问

无需辅助函数，直接通过组件的$store对象访问getter：

<template>
  <div>
    <p>姓名：{{ $store.getters['auth/currentUser'].name }} {{ $store.getters['auth/currentUser'].surname }}</p>
    <p>邮箱：{{ $store.getters['auth/currentUser'].email }}</p>
  </div>
</template>

3. 在非组件文件中访问用户信息

如果是在工具函数、其他Vuex模块等非组件文件中访问，直接导入store实例即可：

import store from '@/store';

const currentUser = store.getters['auth/currentUser'];
console.log(currentUser.name, currentUser.surname, currentUser.email);