Question

这是我想做的事情：我有一个组件，其中一个数据是从共享对象中读取的，每次更改值时，我都想知道并做一些事情。所以我决定用手表来看那个属性。这是我的代码：

user?user_id=1

我的sharedData很简单，仅用于演示：

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

与指南一样，sharedData是一个对象。但问题出现了：这个组件中的sharedData或其他组件中的事件的更改可以在index属性中正确显示，但watch函数永远不会被触发（也许我正在侦听要更改的对象，但其结构是还是一样）。那么我怎么能让这个组件知道一个特定的共享数据发生了变化呢？

Answer 1

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

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

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

Answer 2

我在forum.vuejs.org上发布了相同的问题，并在那里得到答案，所以我在这里为那些可能有相同问题的人添加了该答案的链接。 http://forum.vuejs.org/topic/4605/use-watch-in-store-pattern/3

Answer 3

@ ericchan1336的答案是在Vue论坛上复制的，以供参考：

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

对于这些情况，有deep：true选项，它使手表检查嵌套在被监视属性中的深层变化：

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

在商店模式中使用手表

3 个答案: