在商店模式中使用手表

Question

这是我想做的：我有一个组件，其中一个数据是从一个共享对象中读取的，每次值发生变化时，我都想知道并对此做些什么。所以我决定对属性使用 watch。这是我的代码：

export default {                                          
data: function () {
  return {
    index: sharedData
  }
}, 
watch: {
  'index': function (val) {
       doSmething()
  }
} 
}

我的 sharedData 非常简单，仅供演示：

let shatedData = {                                         
  testIndex: 0
}

正如指南所说，sharedData 是一个对象。但是问题来了：这个组件中sharedData的变化，或者其他组件中的事件，可以在索引属性中正确显示，但是watch函数永远不会触发（可能是我在监听一个对象变化，但其结构仍然相同）。那么我该怎么做才能让这个组件知道一个特定的共享数据发生了变化？

Answer 1

我有一个丑陋的解决方案来解决我的问题：添加一个计算的属性以收听该共享对象中的确切属性。

computed: {                                                  
  compIndex: function () {
    console.log(`caught in computed value`)
    doSomething()
    return this.index.data
  }
},

此计算属性必须存储在隐藏元素中，以便可以调用 doSomething。有更好的想法吗？

Answer 2

我 post 在 forum.vuejs.org 上提出了同样的问题，并在那里得到了答案，因此我将 link 添加到此处的答案中，以供可能有相同问题的任何人使用。 http://forum.vuejs.org/topic/4605/use-watch-in-store-pattern/3

Answer 3

@ericchan1336 在 Vue 论坛上得到的答案复制在这里以供参考：

watch 函数永远不会触发，因为索引属性本身永远不会改变 - 它总是包含相同的对象，只有该对象内的属性会改变。

对于这些情况，有 deep: true 选项，这使得 watch 检查嵌套在 watched 中的深层变化属性:

watch: {
  'index': {
    deep: true,
    handler: function (val) {
       doSmething()
     }
   }
}

在商店模式中使用手表

Use watch in store pattern

vue.js