Vue组件使用Pinia时ref未更新问题排查

• onMounted 仅执行一次：onMounted是Vue的生命周期钩子，只会在组件挂载完成后运行一次。你在其中编写的DOM控制逻辑（比如根据currentlyActiveInput切换h1可见性）只会执行这一次，后续Pinia状态更新时，这段代码不会重新触发，自然无法同步更新DOM状态。

• 未绑定响应式监听：Pinia的状态本身是响应式的，但你没有对currentlyActiveInput的变化建立监听机制。onMounted里的代码只是在组件初始化时读取了一次状态值，状态更新时没有任何逻辑触发DOM更新操作。

• v-if 生效的核心原因：v-if是Vue内置的响应式指令，它会自动追踪依赖的响应式状态（即Pinia中的currentlyActiveInput）。当状态变化时，Vue的响应式系统会自动触发组件重新渲染，从而更新元素的可见性。而你依赖onMounted的手动逻辑，没有和响应式状态建立绑定关系，因此无法感知状态变化。

举个典型的错误代码示例：

<script setup>
import { useStore } from '@/stores/yourStore'
import { onMounted } from 'vue'

const store = useStore()

onMounted(() => {
  const h1El = document.querySelector('h1')
  // 仅初始化时执行一次判断
  h1El.style.display = store.currentlyActiveInput === 'target' ? 'block' : 'none'
})
</script>

<template>
  <h1>目标标题</h1>
  <InputBox />
</template>

如果想保留手动控制逻辑，需要通过watch监听状态变化：

<script setup>
import { useStore } from '@/stores/yourStore'
import { onMounted, watch } from 'vue'

const store = useStore()

const toggleH1Visibility = () => {
  const h1El = document.querySelector('h1')
  h1El.style.display = store.currentlyActiveInput === 'target' ? 'block' : 'none'
}

// 初始化执行一次
onMounted(toggleH1Visibility)
// 监听状态变化，触发更新
watch(() => store.currentlyActiveInput, toggleH1Visibility)
</script>

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