比如說,例如,你有一籃子水果,每次你從籃子里添加或拿走水果 ,你想顯示有關水果數量的信息,但是你也想當籃子中數量變化的時候收到通知。
fruit-count-component.vue
<template>
<p>Fruits: {{ count }}</p>
</template>
<script>
import basket from '../resources/fruit-basket'
export default () {
computed: {
count () {
return basket.state.fruits.length
// Or return basket.getters.fruitsCount
// (depends on your design decisions).
}
},
watch: {
count (newCount, oldCount) {
// Our fancy notification (2).
console.log(`We have ${newCount} fruits now, yaay!`)
}
}
}
</script>
上述代碼，請注意，watch 對象中函數名必須和computed對象中的函數名匹配，在上面實例中名字是 count.
被監視屬性的新值和舊值將作為參數傳遞到監視回調(count函數)中。
basket store 看起來像這樣:
fruit-basket.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const basket = new Vuex.Store({
state: {
fruits: []
},
getters: {
fruitsCount (state) {
return state.fruits.length
}
}
// Obvously you would need some mutations and actions,
// but to make example cleaner I'll skip this part.
})
export default basket
您可以在以下資源中閱讀更多內容：
Computed properties and watchers
API docs: computed
API docs: watch
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
