vue3项目调一个鉴权接口 这个接口会返回一个业务员的工号 用pinia想把这个工号存起来 让每个组件调接口的时候都可以随时拿到这个工号 怎么做

在 Vue3 中，可以使用 Pinia 存储管理状态（类似于 Vuex 的 state），来保存全局共享的数据，比如业务员的工号。以下是步骤：

1. 安装并配置 Pinia：首先安装 `@vue/pinia` 和 `vue-router-pwa`（如果需要路由守卫），然后创建一个 store 文件，例如 `store/auth.js`，用于存放工号信息。

import { defineStore } from 'pinia';

export const useEmployeeIdStore = defineStore('employeeId', {
  state: () => ({
    employeeId: null, // 初始值设为 null
  }),
  actions: {
    async fetchEmployeeId() {
      try {
        const response = await axios.get('/auth'); // 调用鉴权接口
        this.employeeId = response.data.id; // 存放工号
      } catch (error) {
        console.error('Error fetching employee ID:', error);
      }
    },
  },
});

2. 在 `App.vue` 或者其他合适的地方初始化 store 并触发获取工号操作：

import { useEmployeeIdStore } from '@/store/auth';

setup() {
  const store = useEmployeeIdStore();
  
  onMounted(() => {
    store.fetchEmployeeId(); // 首次加载页面时获取工号
  });

  return {
    //...
  };
}

3. 现在在任何组件中，你可以通过注入 `useEmployeeIdStore` 来访问工号：

import { computed } from 'vue';
import { useEmployeeIdStore } from '@/store/auth';

setup() {
  const store = useEmployeeIdStore();

  const employeeId = computed(() => store.employeeId);

  return {
    employeeId,
    //...
  };
}

// 组件内的模板里就可以直接使用 `this.employeeId`