vuejs怎麼watch對象里某個屬性的變化呢？

由於要組件間通信，現在使用的是一個單獨的store.js來實現的store模式。

現在的問題是，我要在一個組件中修改store里的state對象的一個屬性，在另一個組件中watch這個屬性，當變化後執行一個方法

問題就是怎麼watch對象中的一個屬性的變化，直接watch這個對象貌似是無效的

---

在vue的實例上watch，不要在組件的實例上watch

---

解決了

import Store from "./store.js";
export default {
data(){
return {
//將Store.state綁定在data上
data:Store.state,
}
},
ready(){
},
watch:{
// 通過這種語法來watch就行，文檔里有。。。看需求，還可以直接watch data，使用deep:true來深度觀察
"data.status":{
handler:(val,oldVal)=&>{
//要執行的任務
//這裡不知道怎麼才能修改到this.data的數據，有知道的麻煩告知
//現在知道的就是通過直接修改Store.state的方式來更新數據，當然效果和修改this.data是一樣的
},
// 深度觀察
deep:true
}
},
methods:{
}
}


---

es5:
var vm = new Vue({
data: {
firstName: "Foo",
lastName: "Bar",
fullName: "Foo Bar"
}
})

vm.$watch("firstName", function () {
//執行其他代碼
})

es6:
export default {
data(){
return {
firstName: "firstName"
}
},
watch:{
firstName: function(val) { //此處不要使用箭頭函數
console.log(val)
}
}

}


---

給a&<5或者b&<14的那行，改變字體顏色為紅色

---

export default {

data () {

return {

example0:"",
　　　　　　　　　　example1:"",
　　　　　　　　　　example2:{
　　　　　　　　　　　　inner0:1,
　　　　　　　　　　　　innner1:2
　　　　　　　　　　},
example3:""
}


},

watch:{

　　　　　　　　example0(curVal,oldVal){

　　　　　　　　　　console.log(curVal,oldVal);

　　　　　　　　},

　　　　　　　　example1:"a"，//值可以為methods的方法名

　　　　　　　　example2:{

　　　　　　　　　//注意：當觀察的數據為對象或數組時，curVal和oldVal是相等的，因為這 兩個形參指向的是同一個數據對象

　　　　　　　　　　handler(curVal,oldVal){

　　　　　　　　　　　　conosle.log(curVal,oldVal)

　　　　　　　　　　},

　　　　　　　　　　deep:true

　　　　　　　　},

example3: {handler:"a",deep:true}

　　　　　　},

　　　　　　methods:{

　　　　　　　　a(curVal,oldVal){

　　　　　　　　　　conosle.log(curVal,oldVal)

conosle.log(this.example0)

　　　　　　　　}

　　　　　　}

}

---

推薦閱讀：