如何将Vue 3选项式API代码转换为组合式API？

以下是将你提供的选项式API代码转换为组合式API（使用<script setup>语法）的适配版本：

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

// 定义响应式变量，对应原data中的属性
const productName = ref('')
const productFeatures = ref('')
const temperature = ref(0.1)
const generatedText = ref('')
const loading = ref(false)
const aviso = ref(false)

// 定义生成文本的方法，对应原methods中的generateText
const generateText = () => {
  loading.value = true
  const prompt = `This is a test ${productName.value}.`
  
  axios.post('https://example.com', {
    model: "XXXXXX",
    logprobs: 1,
    max_tokens: 500,
    prompt: prompt,
    temperature: 0.3
    // temperature: 0.7,
  }, {
    headers: {
      'Authorization': 'Bearer XXXXXXXXXXXXX'
    }
  }).then(response => {
    generatedText.value = response.data.choices[0].text
    loading.value = false
    aviso.value = true
  })
  // 补充错误处理，防止请求失败后loading状态无法重置
  .catch(error => {
    console.error('文本生成请求失败:', error)
    loading.value = false
  })
}
</script>

转换关键点说明 #

• 使用Vue3推荐的<script setup>语法，无需手动导出变量和方法，自动暴露给模板使用
• 用ref()创建所有响应式变量，替代原选项式API中的data选项；在脚本中访问/修改变量时需通过.value，模板中可直接使用变量名
• 方法直接定义为普通函数，不再需要嵌套在methods对象中
• 新增了请求错误捕获逻辑，避免请求失败后页面一直处于加载状态

内容的提问来源于stack exchange，提问作者Brunno Vert