如何在 Vue 3 Composition 中设置随机字母生成器 API

Question

我正在尝试使用 Vue 3 Composition API 设置一系列按钮以连续显示随机字母。在设置函数中，我创建了 4 个带有一系列字母的独立数组。然后使用随机函数将字母随机化，然后使用由 onBeforeMount 生命周期挂钩调用的函数返回到屏幕。结果是每次刷新页面时，每个按钮上的字母都会更新。目前，我的代码设置为将每个字母常量初始化为空引用，如下所示：

    const letterDisplayOne = ref('')
    const letterDisplayTwo = ref('')
    const letterDisplayThree = ref('')
    const letterDisplayFour = ref('')

对我来说，上面的内容看起来很乱。所以我改为尝试重构，以便将常量合并为一个 ref 方法：

const { letterDisplayOne, letterDisplayTwo, letterDisplayThree, letterDisplayFour } = ref('')

但是，当我以这种方式设置常量和清空 ref 时，当它们在后续函数中被引用时，我无法解压缩每个常量的 .value。我的问题：是否可以以不阻止解包 .values（或其他错误）的方式合并多组常量？

这是我的完整代码：

模板

<template>
  <div div class="flex justify-center">
    <button @click="handleClick">Click for Audio</button>
    <button>{{ letterDisplayOne }}</button>
    <button>{{ letterDisplayTwo }}</button>
    <button>{{ letterDisplayThree }}</button>
    <button>{{ letterDisplayFour }}</button>
  </div>
</template>

脚本

<script>
import { ref } from 'vue' 
import { onBeforeMount } from 'vue';

export default {
  name: 'Button',
  components: {},
  setup() {

    const letterDisplayOne = ref('')
    const letterDisplayTwo = ref('')
    const letterDisplayThree = ref('')
    const letterDisplayFour = ref('')
    const letterArrayOne = ref(['a','b','c','d','e','f','g'])
    const letterArrayTwo = ref(['a','b','c','d','e','f','g'])
    const letterArrayThree = ref(['a','b','c','d','e','f','g'])
    const letterArrayFour = ref(['a','b','c','d','e','f','g'])
    const chosenOne = Math.floor(Math.random() * letterArrayOne.value.length)
    const chosenTwo = Math.floor(Math.random() * letterArrayTwo.value.length)
    const chosenThree = Math.floor(Math.random() * letterArrayThree.value.length)
    const chosenFour = Math.floor(Math.random() * letterArrayFour.value.length)

    const handleletterArray = () => {
      letterDisplayOne.value = letterArrayOne.value[chosenOne]
      letterDisplayTwo.value = letterArrayTwo.value[chosenTwo]
      letterDisplayThree.value = letterArrayThree.value[chosenThree]
      letterDisplayFour.value = letterArrayFour.value[chosenFour]
    }

    onBeforeMount(() => {
      handleletterArray()
    })

    return {  
    letterDisplayOne,
    letterDisplayTwo,
    letterDisplayThree,
    letterDisplayFour,
    letterArrayOne,
    letterArrayTwo,
    letterArrayThree,
    letterArrayFour, 
    handleletterArray, 
    onBeforeMount, 
    chosenOne,
    chosenTwo,
    chosenThree,
    chosenFour 
    }
  }
}
</script>

Answer 1

可能是：

const { letterDisplayOne, … } = toRefs(reactive({ letterDisplayOne: '', … }));

Refs 对两种常见情况特别有用。第一种情况是当值需要作为对象通过引用传递时。第二个是一个值不一致，不能表示为反应对象，而ref值可以是任何东西。

None 这些情况适用于此处，因此使用单独的参考没有实际好处。它可以只是：

const letters = reactive({ one: '', … });

如何在 Vue 3 Composition 中设置随机字母生成器 API

How to set up a random letter generator in Vue 3 Composition API

javascript

vue.js

vue-component

vuejs3

vue-composition-api