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

Question

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正确地更改了其值（或者至少执行了该方法的主体） ），但没有执行观察程序，我有一种感觉，因为在我的模板中从未使用过focusSide状态，所以vuejs认为没有必要做出反应和更改值，就像反应式框架一样，如果不遵守该值，则不要这样做。改变（也许我错了）

什么是实现此目标的理想方式？？？ 谢谢

Answer 1

您需要计算属性focusSide的返回值，否则它将始终返回未定义

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