Vue 3中如何访问Pinia Store数组元素并处理文本？

问题概况 #

需要合并Pinia中存储的字符串数组并执行文本清洗（移除HTML标签、URL、指定停用词），但遇到以下问题：

• 无论直接访问响应式代理还是用toRaw获取原始数组，访问数组元素（如summariesRaw[0]）均返回undefined，for循环无法执行
• Vue开发者工具中filteredSummaries始终为空
• 使用计算属性实现时，仅在编辑器保存触发热重载后偶尔生效

核心原因 #

1. 响应式数据未就绪时触发计算/监听：在gameSummaries被正确赋值前，计算属性或监听器已执行，此时数组为空或响应式绑定未完成
2. 冗余处理干扰响应式追踪：计算属性版本中使用JSON.parse(JSON.stringify(gameSummaries.value))做深拷贝，破坏了响应式依赖的自动追踪
3. 监听器赋值错误：原代码中最后将joined（未处理的原始拼接字符串）赋值给filteredSummaries，而非处理后的filtered，导致结果未更新
4. 边界情况未处理：未判断数组为空的场景，直接调用join等方法可能引发隐性异常

修复方案 #

方案一：使用计算属性（推荐） #

计算属性天生适配响应式衍生数据的场景，自动处理依赖追踪，代码更简洁可靠：

<script setup>
import { useMainStore } from '@/stores/main'
import { storeToRefs, computed } from 'pinia'

const store = useMainStore()
const { gameSummaries } = storeToRefs(store)
const stopWords = ["test"]

const filteredSummaries = computed(() => {
  // 处理数组为空的边界情况
  if (!gameSummaries.value.length) return ''
  
  // 直接使用响应式数组，无需额外序列化或toRaw
  const joined = gameSummaries.value.join(' ')
  
  // 分步执行文本清洗
  const strippedHtml = joined.replaceAll(/<\/?[^>]+(>|$)/gi, "")
  const strippedUrls = strippedHtml.replaceAll(/(?:https?|ftp):\/\/[\n\S]+/g, '')
  // 用模板字符串简化正则表达式构建，添加i标志忽略大小写
  const filtered = strippedUrls.replaceAll(new RegExp(`\\b(${stopWords.join('|')})\\b`, 'gi'), '')
  
  return filtered
})
</script>

方案二：修正监听器实现 #

如果坚持使用监听器，需修正赋值错误并添加边界判断：

<script setup>
import { useMainStore } from '@/stores/main'
import { storeToRefs, watch, ref } from 'pinia'
import { toRaw } from 'vue'

const store = useMainStore()
const { gameSummaries } = storeToRefs(store)
const stopWords = ["test"]
const filteredSummaries = ref('')

watch(gameSummaries, (newValue) => {
  const summaries = toRaw(newValue)
  // 空数组直接返回空字符串
  if (!summaries.length) {
    filteredSummaries.value = ''
    return
  }
  
  const joined = summaries.join(' ')
  const strippedHtml = joined.replaceAll(/<\/?[^>]+(>|$)/gi, "")
  const strippedUrls = strippedHtml.replaceAll(/(?:https?|ftp):\/\/[\n\S]+/g, '')
  const filtered = strippedUrls.replaceAll(new RegExp(`\\b(${stopWords.join('|')})\\b`, 'gi'), '')
  
  // 赋值处理后的结果，而非原始拼接字符串
  filteredSummaries.value = filtered
}, { deep: true })
</script>

额外注意事项 #

确保调用Pinia的setGameSummaries方法时，传入的是合法的字符串数组，例如：

// 在组件或其他逻辑中调用
store.setGameSummaries(["First game summary", "<p>Second summary with HTML</p>", "Test summary containing a URL: https://example.com"])

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