как размытие или фокусировка компонента vuejs на основе состояния vuex

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
}