Vue+Pinia：修改Store中focusIn属性时如何让其他组件输入框获焦

要实现这个需求，核心思路是在目标输入框所在组件中监听Pinia Store的focusIn状态，当状态变为true时调用输入框的focus()方法，具体步骤如下：

1. 给目标输入框绑定DOM引用 #

在需要获取焦点的输入框所在组件里，用Vue的ref绑定输入框元素，方便后续操作DOM：

<template>
  <input ref="targetInput" type="text" placeholder="会被自动聚焦的输入框">
</template>

<script setup>
import { ref } from 'vue'
// 定义ref绑定输入框
const targetInput = ref(null)
</script>

2. 监听Store中focusIn的状态变化 #

引入你的Pinia Store，使用watch监听focusIn的变化，当它变为true时，触发输入框的聚焦操作：

<script setup>
import { ref, watch } from 'vue'
// 替换成你实际的Store导入路径
import { useYourStore } from '@/stores/yourStore'

const targetInput = ref(null)
const store = useYourStore()

// 监听focusIn状态
watch(
  // 监听的目标状态
  () => store.focusIn,
  // 状态变化后的回调
  (isFocusNeeded) => {
    // 只有当状态为true且输入框DOM存在时，执行聚焦
    if (isFocusNeeded && targetInput.value) {
      targetInput.value.focus()
      // 可选：如果只需要触发一次聚焦，这里重置状态为false，避免重复触发
      store.focusIn = false
    }
  },
  // 可选配置：初始渲染时不执行回调
  { immediate: false }
)
</script>

额外注意事项 #

• 确保你的Pinia Store已经在Vue项目中正确注册，组件能正常获取到Store实例
• 如果不需要重复触发聚焦，一定要在调用focus()后把focusIn重置为false，否则后续再次修改该状态时会重复触发
• 要保证输入框已经挂载到DOM上（targetInput.value不为null）再调用focus()，避免报错

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