storeState 数据上的 Vue.js Watcher

Question

在我的 Vue.js 中，我有一个使用 Google Vision 从图片中获取标签的函数。 这个函数在一个mixin所以我的代码不会那么臃肿。

然后我将标签作为数组存储在storeState以便我可以在其他组件中访问它。

我想要的是在存储数组后立即调用另一个函数。 所以我实现了一个观察者：

watch: {
    this.storeState.labels: function () {
      anotheFunction()
      } 
    } 

但是我收到了一个Unexpected keyword 'this'错误。 那么如何在this.storeState.labels更新后立即触发另一个函数？

Answer 1

在不使用this关键字的情况下观察该属性：

watch: {
    "storeState.labels": function () {
      anotheFunction()
      } 
    } 

Answer 2

您必须首先创建一个计算属性，然后观察该计算属性以在更改时执行您的操作

computed:{
    labels(){
       return this.storeState.labels; // did you mean return this.$store.state.labels ?
    }
},

watch:{
    labels:{
       handler:function(){
                anotherFunction()     
               }
        
    }
}

Answer 3

你有 2 种方法来做到这一点。 首先使用引号语法。

watch: {
  'storeState.labels'() {
     // Do your magic here..
  }
}

第二种方法是深入观察对象。

watch: {
  storeState: {
     deep: true,
     handler() {
       // Do your magic here
       // This way watches all your object changes so then while using this be sure that you're doing right magic
     }
  }
}

此外，在这两种情况下，您都应该有一个计算值才能在 Vue 端使用storeState对象。