Vuejs监听vuex中值的变化的方法示例

比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。

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