Vue3+Pinia中如何将固定长度字符串数组转为Ref<string>数组

1. 重构Pinia Store的状态定义 #

把原来的普通字符串数组，改成每个元素都是Ref<string>类型的数组（如果是固定16个元素，可以定义严格的元组类型）。

示例代码（TypeScript）：

import { defineStore } from 'pinia'
import { ref, Ref } from 'vue'

// 定义16个Ref<string>的元组类型
type InputTuple = [
  Ref<string>, Ref<string>, Ref<string>, Ref<string>,
  Ref<string>, Ref<string>, Ref<string>, Ref<string>,
  Ref<string>, Ref<string>, Ref<string>, Ref<string>,
  Ref<string>, Ref<string>, Ref<string>, Ref<string>
]

export const useInputStore = defineStore('input', () => {
  // 初始化16个空字符串的响应式元素
  const userInputValues = Array.from({ length: 16 }, () => ref('')) as InputTuple

  return { userInputValues }
})

如果用JavaScript，直接去掉类型定义即可：

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useInputStore = defineStore('input', () => {
  const userInputValues = Array.from({ length: 16 }, () => ref(''))

  return { userInputValues }
})

2. 组件中直接使用状态 #

不需要用storeToRefs处理整个数组，因为每个元素本身已经是响应式的Ref了，直接从store中解构即可：

<script setup>
import { useInputStore } from '@/stores/input'

const inputStore = useInputStore()
const { userInputValues } = inputStore
</script>

<template>
  <!-- 直接v-model绑定每个数组元素 -->
  <div v-for="(input, idx) in userInputValues" :key="idx">
    <input type="text" v-model="input" />
  </div>
</template>

原理说明 #

原来的写法是把整个数组用Ref包裹，数组内部的元素是普通字符串，访问userInputValues.value[idx]得到的是非响应式值，v-model无法追踪变化。改成每个元素单独用ref包裹后，每个元素本身就是独立的响应式数据源，v-model可以直接绑定并触发状态更新。

内容的提问来源于stack exchange，提问作者8SIXSector