Vuejs监听vuex中值的变化的方法示例
2019-01-31 12:32
609 查看
比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- VueJs 监听 window.resize 方法---窗口变化
- VueJs 监听 window.resize 方法---窗口变化
- VueJs 监听 window.resize 方法---窗口变化
- AngularJS监听路由的变化示例代码
- js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
- 数据库变化监听方法
- Android应用开发EditText文本内容变化监听方法
- 监听Gps设置变化方法一
- Android与JS交互监听,url实时变化的方法.
- UITextField 监听数值变化的三种方法
- React和Vue中监听变量变化的方法
- 基于vue-cli的vue项目之vuex的使用5------watch监听vuex内部数据变化
- RecyclerView中监听EditText变化的BUG的解决方法
- 从零开始学习Node.js系列教程五:服务器监听方法示例
- angular5 子组件监听父组件传入值的变化方法
- js中监听input的值发生变化几种方法的区别
- Android 7.0 监听网络变化的示例代码
- vue.js使用watch监听路由变化的方法
- Java利用WatchService监听文件变化示例
- iOS正确监听手机静音键和侧边音量键的方法示例