Vue 中如何通过 Pinia Store 状态变更自动聚焦输入框-js教程-PHP中文网

Vue 中如何通过 Pinia Store 状态变更自动聚焦输入框

本文介绍在 Vue 应用中，当 Pinia store 中的布尔状态（如 focusIn）发生变化时，如何跨组件触发目标元素的自动聚焦，涵盖响应式监听、模板 ref 获取与聚焦时机控制等关键实践。

本文介绍在 vue 应用中，当 pinia store 中的布尔状态（如 `focusin`）发生变化时，如何跨组件触发目标 `` 元素的自动聚焦，涵盖响应式监听、模板 ref 获取与聚焦时机控制等关键实践。

在 Vue 3 + Pinia 架构中，store 状态变更本身不会自动触发 DOM 操作（如 focus()），因此需在组件内建立对 store 状态的响应式监听，并在状态满足条件时主动调用原生 focus() 方法。核心思路是：利用 watch 监听 store 中的 focusIn 状态，结合模板 ref 安全获取并聚焦目标 input 元素。

✅ 正确实现步骤

为 input 添加模板 ref
使用 ref 指令绑定唯一标识（注意：避免使用 ref="inputRef" 这类静态字符串，推荐使用 ref="inputRef" 配合 defineRef 或直接在 setup 中声明响应式 ref）：
```
<template><input ref="inputRef" type="text" placeholder="自动聚焦的目标输入框"></template>
```

在组件中声明 ref 并监听 store 状态
在 <script setup> 中，使用 ref() 创建模板 ref，并通过 watch() 响应式监听 Pinia store 的 focusIn 属性：</script>

<script setup>
import { ref, watch } from 'vue'
import { useMyStore } from '@/stores/myStore'

const store = useMyStore()
const inputRef = ref(null)

// 监听 focusIn 变化：仅当值变为 true 时聚焦，且确保 DOM 已就绪
watch(
  () => store.focusIn,
  (newVal) => {
    if (newVal && inputRef.value) {
      // 使用 nextTick 确保 DOM 渲染完成后再聚焦（尤其在异步更新或动态渲染场景下）
      nextTick(() => {
        inputRef.value?.focus()
      })
    }
  },
  { immediate: false } // 初始不触发，仅响应后续变更
)
</script>

⚠️ 注意事项：

Vue Composition Analyzer
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……

下载

必须检查 inputRef.value 是否存在，防止组件未挂载或 input 尚未渲染时调用 focus() 报错；

推荐搭配 nextTick 使用，避免因 Vue 的异步 DOM 更新机制导致聚焦失败；

若 focusIn 可能被多次设为 true，建议在聚焦后重置状态（如 store.focusIn = false），或添加防抖逻辑，避免重复聚焦干扰用户体验；

该方案适用于任意组件——只要它导入同一 store 实例并监听对应状态，即可实现“一处触发、多处响应”的聚焦联动。