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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。