Vue.js 如何基于vuex状态模糊或聚焦vuejs组件

我对vuejs有点问题

我的状态基本上是这样的

  state: ()=>({
        activeSide : "from",
    }),

我希望根据activeSide是否将值activeSide设置为“from”来聚焦或模糊组件

目前我的想法似乎不是很优雅，我基本上在我的组件中创建了一个计算属性

focusSide(){
    console.log("changed active side")
    this.$store.state.activeSide
}

然后我设置了一个手表，看看这个属性是否发生了变化

watch:{
focusSide : function(newV,_){
  console.log("changing focus")
  newV=="from" ? this.$refs.fromArea.$el.focus() : this.$refs.fromArea.blur()
}

},

这里的问题是，除了解决方案看起来不优雅，手表也不工作之外，我已经看到focusSide正在正确地更改其值（或者至少执行了方法体），但是watcher没有执行，我有一种感觉，因为focusSide状态从未在我的模板中使用过，vuejs认为没有必要做出反应和改变价值观，比如反应式框架，如果没有观察到价值观，就不要改变（也许我错了）

实现这一目标的理想方式是什么？？？

---

谢谢

您需要返回计算属性的值

focusSide

，否则它将始终返回未定义的值

focusSide () {
    console.log("changed active side")
    return this.$store.state.activeSide
}

---

谢谢@ittus我可能在测试不同代码时删除了这个。观察者似乎没有改变焦点。我的代码基于此，但此。$refs.fromArea。$el未定义，在检查调试程序后，发现此。$refs.fromArea.focus（）focus函数存在，可能是正确的方法，但不会更改组件中的焦点。顺便问一下…你认为这是最好的方法吗？？？感谢您检查@ittus，将代码更改为此时起作用。$refs.fromArea.focus（）并放入返回语句（感谢您注意到它）…最好不要担心任何问题，祝您编码愉快！