vue3项目调一个鉴权接口 这个接口会返回一个业务员的工号 想把这个工号存起来 让每个组件调接口的时候都可以随时拿到这个工号 怎么做
时间: 2024-09-14 19:14:00 浏览: 11
在 Vue3 中,你可以通过以下步骤将鉴权接口获取到的工号存储在一个全局状态(如 Vuex store 或者 Vue 的响应式数据),以便所有组件都能访问:
1. **Vuex Store** (推荐):
- 安装 `vue-router` 和 `vuex`,如果还没安装的话:
```bash
npm install vue-router vuex
```
- 创建一个名为 `store.js` 的文件,初始化 Vuex store:
```javascript
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
employeeNo: null, // 存储工号
},
mutations: {
setEmployeeNo(state, no) {
state.employeeNo = no;
},
},
actions: {
fetchData({ commit }) {
axios.get('your-auth-api') // 替换为你的鉴权接口
.then(response => {
commit('setEmployeeNo', response.data.employeeNo);
})
.catch(err => console.error(err));
},
},
});
```
然后在需要的地方调用 `fetchData` 获取并设置工号。
2. **Vue 的响应式属性 (ref)**:
如果不想使用 Vuex,你可以在根实例上创建一个 ref 来存放工号:
```javascript
import { ref } from "vue";
const app = new Vue({
data() {
return {
employeeNoRef: ref(null), // 初始化为 null
};
},
created() {
this.fetchEmployeeNo();
},
methods: {
async fetchEmployeeNo() {
try {
const res = await axios.get('your-auth-api');
this.employeeNoRef.value = res.data.employeeNo;
} catch (err) {
console.error(err);
}
},
},
});
```
然后在需要的地方使用 `this.employeeNoRef`。
无论哪种方式,确保在组件中访问工号前先检查是否已加载成功 (`employeeNo !== null` 或 `employeeNoRef.value !== null`):
```html
<template>
<div v-if="employeeNo">
<!-- 组件内容 -->
<p>{{ employeeNo }}</p>
</div>
</template>
<script>
export default {
computed: {
employeeNo() {
return this.$store.state.employeeNo || this.employeeNoRef.value; // 使用 Vuex 或响应式属性
},
},
};
</script>
```