Блог

В моем Vue.js У меня есть функция, которая получает метки из изображения с помощью Google Vision. Эта функция находится внутри mixin , поэтому мой код не такой раздутый.

Затем я сохраняю метки в виде массива в storeState , чтобы я мог получить к нему доступ в других компонентах.

Я хочу вызвать другую функцию, как только мой массив будет сохранен. Итак, я внедрил наблюдателя:

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

Но я получаю Unexpected keyword 'this' ошибку. Итак, как я могу запустить другую функцию, как только мой this.storeState.labels будет обновлен?

Следите за этим свойством без использования this ключевого слова :

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

Сначала вам нужно создать вычисляемое свойство, а затем просмотреть это вычисляемое свойство, чтобы выполнить свои операции при изменении

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

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

У вас есть 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
     }
  }
}
  

Кроме того, в обоих случаях у вас должно быть вычисленное значение для использования storeState объекта на стороне Vue.