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