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

在 Vue.js 3 中，你可以将这段 JavaScript 代码片段转换成更符合组件化和响应式的思想。假设你在 `setup` 函数中处理 `token` 的逻辑，可以这样做：

import { ref } from 'vue'

// 创建一个响应式的变量存储 token
const tokenRef = ref(null)

function useToken(token) {
  if (token !== undefined) {
    // 设置 headers，这里需要确保是在Vue实例的methods或setup函数中进行
    this.$axios.defaults.headers.common['X-Access-Token'] = token
  }
}

export default {
  setup() {
    const token = tokenRef.value // 如果token已经存在

    // 使用时调用useToken
    useToken(token)

    return {
      token,
      useToken
    }
  }
}

然后在组件内部，你可以在需要的地方通过 `this.useToken` 调用该函数。这样，当 `token` 变化时，设置的 header 会自动更新。