Vue3+Pinia实现跨应用动态双向绑定的方案探讨

核心思路：存储响应式引用而非DOM元素 #

放弃直接操作DOM，转而在Pinia中存储当前需要绑定的Vue响应式ref对象。Vue的ref本身具备响应式特性，修改ref的值会自动同步到绑定的组件，组件值的变更也会同步回ref，天然支持双向绑定。

具体实现步骤 #

1. 改造Pinia Store

新增存储当前激活响应式引用的状态，以及对应的绑定、解绑、更新方法：

// stores/keyboard.ts
import { defineStore, ref } from 'pinia'
import type { Ref } from 'vue'

export const useKeyboardStore = defineStore('keyboard', () => {
  // 存储当前激活的响应式引用（支持任意类型的组件状态ref）
  const activeInputRef = ref<Ref<string | number | null> | null>(null)
  const showKeyboardDrawer = ref(false)

  // 绑定目标ref并打开键盘
  const bindInput = (inputRef: Ref<string | number | null>) => {
    activeInputRef.value = inputRef
    showKeyboardDrawer.value = true
  }

  // 解绑当前ref并关闭键盘
  const unbindInput = () => {
    activeInputRef.value = null
    showKeyboardDrawer.value = false
  }

  // 键盘输入更新绑定值
  const updateInputValue = (value: string | number) => {
    if (activeInputRef.value) {
      activeInputRef.value.value = value
    }
  }

  return {
    activeInputRef,
    showKeyboardDrawer,
    bindInput,
    unbindInput,
    updateInputValue
  }
})

2. 改造输入组件

聚焦时将自身的响应式ref传递给Pinia，模糊或销毁时解绑：

<!-- InputComponent.vue -->
<template>
  <input 
    v-model="localValue" 
    @focus="bindToKeyboard"
    @blur="unbindFromKeyboard"
  />
</template>

<script setup lang="ts">
import { ref, watch, onUnmounted } from 'vue'
import { useKeyboardStore } from '@/stores/keyboard'

const props = defineProps<{
  modelValue: string | number
}>()
const emit = defineEmits<{
  'update:modelValue': [value: string | number]
}>()

// 本地响应式ref，实现与父组件的双向绑定
const localValue = ref(props.modelValue)
watch(localValue, (newVal) => {
  emit('update:modelValue', newVal)
})

const keyboardStore = useKeyboardStore()

const bindToKeyboard = () => {
  keyboardStore.bindInput(localValue)
}

const unbindFromKeyboard = () => {
  // 仅当当前激活的是自身ref时才解绑
  if (keyboardStore.activeInputRef === localValue) {
    keyboardStore.unbindInput()
  }
}

// 组件销毁时强制解绑，避免内存泄漏
onUnmounted(() => {
  unbindFromKeyboard()
})
</script>

3. 改造虚拟键盘组件

直接通过Pinia方法更新激活的ref值，无需DOM操作：

<!-- VirtualKeyboard.vue -->
<template>
  <div v-if="showKeyboard" class="keyboard-drawer">
    <!-- 键盘按钮示例 -->
    <button @click="onKeyPress('1')">1</button>
    <button @click="onKeyPress('2')">2</button>
    <button @click="onKeyPress('backspace')">←</button>
    <button @click="keyboardStore.unbindInput">关闭</button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useKeyboardStore } from '@/stores/keyboard'

const keyboardStore = useKeyboardStore()
const showKeyboard = computed(() => keyboardStore.showKeyboardDrawer)

const onKeyPress = (key: string) => {
  if (!keyboardStore.activeInputRef) return

  let currentValue = keyboardStore.activeInputRef.value?.toString() || ''
  
  if (key === 'backspace') {
    currentValue = currentValue.slice(0, -1)
  } else {
    currentValue += key
  }

  keyboardStore.updateInputValue(currentValue)
}
</script>

方案优势 #

• 无DOM操作：完全基于Vue响应式系统实现，符合Vue设计理念
• 真正双向绑定：修改ref值同步到组件，组件值变更同步回ref
• 灵活绑定任意组件：不仅限于输入框，任何拥有响应式状态的组件，只需传递其ref即可实现全局绑定
• 避免冗余Store条目：仅用一个activeInputRef管理当前激活组件，无需为每个动态组件创建单独Store项

额外优化建议 #

• 类型扩展：可扩展Store支持更多类型的ref（如boolean、数组等），适配不同业务场景
• 多组件切换：若需支持多输入框快速切换，可在Store中维护最近激活的ref列表
• 焦点劫持防护：添加逻辑判断，避免非用户主动操作导致的绑定切换

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