Vue项目数据变化被watch监听并处理

发表于 | 分类于 | 阅读次数
Vue项目数据变化被watch监听并处理。

监听当前vue文件数据

例如，当前的vue文件的data中有如下属性：

1
2
3
4
5
data() {
	return {
	    dialogFormVisible: false,
	}
}

要监听dialogFormVisible变量的数据变化，则代码如下：

1
2
3
4
5
6
watch: {
    dialogFormVisible: function(newVal, oldVal) {
      alert(newVal);
      alert(oldVal);
    }
}

监听vuex中的数据

如果vuex中声明的数据如下：

1
2
3
4
5
6
7
8
export default new Vuex.Store({
  state: {
    avatar: "", 
  },
  mutations: {},
  actions: {},
  modules: {}
});

则监听的代码如下：

1
2
3
4
5
watch: {
    "$store.state.avatar": function(newValue, oldValue) {
      ...
    }
  },
坚持原创技术分享，您的支持将鼓励我继续创作！