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

在Vue 2.x中，这段代码表示当`token`存在时，会将其添加到HTTP请求头`X-Access-Token`中。在Vue 3.x中，由于不再直接操作原型链上的`config`属性，你可以将这个逻辑封装到一个响应式数据对象（如`setup`函数返回的对象）或一个自定义钩子（如`onMounted`、`onUpdated`等）里。以下是对应的转换示例：

import { ref, onMounted } from 'vue';

const tokenRef = ref('');

function setToken(token) {
  if (token) {
    tokenRef.value = token;
  }
}

// 使用在setup()钩子中
setup() {
  const token = tokenRef; // 可以在这里直接使用

  onMounted(() => {
    if (token) {
      setToken(token);
    }
  });

  return {
    token,
    setToken,
  };
}

// 或者在其他组件生命周期钩子或单独的模块中使用
export default {
  setup() {
    // ...同上
  },
  created() {
    if (token) {
      setToken(token);
    }
  },
};

在这个例子中，我们创建了一个响应式的`tokenRef`变量，并在适当的时候设置它的值。然后可以使用这个`token`变量以及`setToken`方法来管理访问令牌。