比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。
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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。