Vuejs监听vuex中值的变化的方法示例


Posted in Javascript onDecember 02, 2018

比如说,例如,你有一篮子水果,每次你从篮子里添加或拿走水果 ,你想显示有关水果数量的信息,但是你也想当篮子中数量变化的时候收到通知。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 问答知识整理
Feb 11 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
Sep 02 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
JS制作手机端自适应缩放显示
Jun 11 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
纯javascript版日历控件
Nov 24 Javascript
react native与webview通信的示例代码
Sep 25 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
详解Vue一个案例引发「内容分发slot」的最全总结
Dec 02 #Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 #Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 #Javascript
GOJS+VUE实现流程图效果
Dec 01 #Javascript
JavaScript实现简单轮播图效果
Dec 01 #Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 #jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 #jQuery
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
jQuery(非HTML5)可编辑表格实现代码
2012/12/11 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
用javascript对一个json数组深度赋值示例
2014/07/27 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
BootStrap轮播HTML代码(推荐)
2016/12/10 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
Python中用于返回绝对值的abs()方法
2015/05/14 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
Python如何实现文本转语音
2016/08/08 Python
Python中property函数用法实例分析
2018/06/04 Python
tensorflow saver 保存和恢复指定 tensor的实例讲解
2018/07/26 Python
python使用PIL模块获取图片像素点的方法
2019/01/08 Python
python实现按首字母分类查找功能
2019/10/31 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
python 模拟登陆163邮箱
2020/12/15 Python
解决import tensorflow导致jupyter内核死亡的问题
2021/02/06 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
美国环保妈妈、儿童和婴儿用品购物网站:The Tot
2019/11/24 全球购物
西式婚礼主持词
2014/03/13 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
学生自我评语
2015/01/04 职场文书
高三教师工作总结2015
2015/07/21 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
5行Python代码实现一键批量扣图
2021/06/29 Python
详解Python+OpenCV绘制灰度直方图
2022/03/22 Python