如何将此方法转换为新的 Vue 3 Composition API？

Question

我正在更新一些 Vue 3 组件以使用新的 Composition API。

代码需要能够在新的 .

我还在学习，我在网上找不到如何做的例子。

提前致谢！

export default {
  data() {
    return {
      productName: '',
      productFeatures: '',
      temperature: 0.1,
      generatedText: '',
      loading: false,
      aviso: false
    }
  },
  methods: {
    generateText() {
      this.loading = true;
      let prompt = `This is a test ${this.productName}.`;
      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 => {
        this.generatedText = response.data.choices[0].text;
        this.loading = false;
        this.aviso = true;
      });
    }
  }
}

Answer 1

这是一个如何将其转换为组合 API 方式的示例。您仍然需要了解 Vue 3 的工作原理。

<script setup>
const {
    productName,
    productFeatures,
    temperature,
    generatedText,
    loading,
    aviso
} = reactive({ productName: '', productFeatures: '', temperature: 0.1, generatedText: '', loading: false, aviso: false })

function generateText() {
    loading = true;
    let prompt = `This is a test ${productName}.`;
    axios.post('https://example.com', {
        model: "XXXXXX",
        logprobs: 1,
        max_tokens: 500,
        prompt: prompt,
        temperature: 0.3
    }, {
        headers: {
            'Authorization': 'Bearer XXXXXXXXXXXXX'
        }
    }).then(response => {
        generatedText = response.data.choices[0].text;
        aviso = true;
    }).finally(() => loading = false);
}
</script>

我更改了函数中加载值更改为 false 的位置，因为如果出现错误，它将加载更少。

您可以像这样使用 ref() 而不是 reactive()：

<script setup>
const productName = ref('')
const productFeatures = ref('')
const temperature = ref(0.1)
const generatedText = ref('')
const loading = ref(false)
const aviso = ref(false)

function generateText() {
    // Using ref instead of reactive means you need to get
    // values by .value and same way assign them.
    loading.value = true
    ...
}
</script>

Ref<T> 用于简单变量，而不是对象。当您将某些东西直接分配给 .value = "bla" 时，它们将正常工作，但如果它是一个对象，并且您想更新该对象 .value.title = "bla" 内部的值，则不能。 Ref<T> 不会知道您更新了 .title 值，因此您会失去反应性，您的模板不会更新标题。

如果你像这样使用Ref<T>，你不会失去反应性：

const data = ref({ title: "Some title" })

data.value = { ...data.value, title: "Some new title" }

如果您不知道，请阅读 ... 传播运算符的作用。