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

在Vue 3.x 中，你可以使用Composition API或者Options API来实现类似的功能。这里我们假设你在组件的script部分进行配置。以下是将上述JavaScript代码转化为Vue 3的选项式API（setup()）：

<template>
  <!-- Your template goes here -->
</template>

<script setup>
import { ref } from 'vue'

// 如果有token变量
let token = ref(null)

function setup(props) {
  if (props.token) { // props通常用于接收父组件传递的数据
    const accessToken = token.value || ''
    // 添加到响应式的headers对象
    const headers = {
      'X-Access-Token': accessToken
    }
    // 将headers绑定给组件实例（如axios、fetch等）
    onMounted(() => {
      // 或者如果你是在axios实例上设置，可以这样做：
      // this.$http.defaults.headers.common['X-Access-Token'] = accessToken
    })
  }
}
</script>

如果你使用的是Composition API，可以这样写：

<template>
  <!-- Your template goes here -->
</template>

<script setup>
import { ref, onMounted } from 'vue'

const tokenRef = ref(null)

onMounted(async () => {
  if (tokenRef.value) {
    const accessToken = tokenRef.value
    // 设置headers
    setHeaders(accessToken)
  }
})

function setHeaders(token) {
  // 对axios或其他库进行配置...
}
</script>