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

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