Vue：在更改 pinia 商店中的属性时添加对输入的焦点

Question

我有一个组件，单击后会调用一个在商店中执行操作的函数：

<button @click="this.store.foo()"></button>

在商店中我更改了此属性：

state: () => ({
 focusIn: false,
}),
actions: {
 foo() {
   this.focusIn = true;
 }
}

现在如何确保当我在商店中更改此 focusIn 属性时，它将焦点设置到除 MyComponent 之外的组件中的输入？

Answer 1

您可以在按钮上添加模板引用并使用它来触发 focus() 函数。

<template>
   <button ref="button" @click="this.store.foo(button)">Button</button>
</template>

<script>
const button = ref()
</script>

在你的 pinia 商店

state: () => ({
 focusIn: false,
}),
actions: {
 foo(buttonRef) {
   this.focusIn = true;
   buttonRef.focus()
 }
}