<scripts> if (token) { config.headers[ 'X-Access-Token' ] = token } </scripts>vue2转化vue3

在 Vue3 中，你可以使用 `setup` 函数来替代传统的 `created` 或者 `beforeCreate` 生命周期钩子，并且更推荐直接将配置项设置到 `app.config.globalProperties` 上，因为这是Vue3中提供的一种统一的方式来管理全局状态。以下是对应的转换示例：

import { onMounted } from "vue";

function useToken(token) {
  const headers = reactive({}); // 使用reactive创建响应式对象

  onMounted(() => {
    if (token) {
      headers['X-Access-Token'] = token;
    }
  });

  return headers;
}

// 在组件中使用
export default {
  setup() {
    const token = ref('your_token'); // 使用ref存储token
    const globalHeaders = useToken(token.value); // 获取带token的headers
    return {
      headers: globalHeaders,
      token
    };
  },
};

在这个例子中，`useToken`函数在组件挂载后设置`X-Access-Token`头，`ref`用于存储可变的数据，如token。`globalHeaders`是一个响应式的对象，可以直接在模板中使用。