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 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
js 删除数组的几种方法小结
Feb 21 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
Bootstrap每天必学之折叠(Collapse)插件
Apr 25 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
Apr 07 Javascript
微信小程序多列选择器range-key使用详解
Mar 30 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
基于js Canvas实现二次贝塞尔曲线
Dec 25 Javascript
10行代码实现微信小程序滑动tab切换
Dec 28 Javascript
javascript实现留言板功能
Feb 08 Javascript
微信小游戏中three.js离屏画布的示例代码
Oct 12 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
全国FM电台频率大全 - 27 陕西省
2020/03/11 无线电
PHP入门速成(2)
2006/10/09 PHP
在任意字符集下正常显示网页的方法一
2007/04/01 PHP
php echo, print, print_r, sprintf, var_dump, var_expor的使用区别
2013/06/20 PHP
php设计模式之单例、多例设计模式的应用分析
2013/06/30 PHP
php获取bing每日壁纸示例分享
2014/02/25 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
php统计数组元素个数的方法
2015/07/02 PHP
ExtJS 2.0实用简明教程 之获得ExtJS
2009/04/29 Javascript
ExtJS扩展 垂直tabLayout实现代码
2009/06/21 Javascript
阻止子元素继承父元素事件具体思路及实现
2013/05/02 Javascript
node.js中的querystring.stringify方法使用说明
2014/12/10 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue实现的下拉框功能示例
2019/01/29 Javascript
js设计模式之单例模式原理与用法详解
2019/08/15 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
python回调函数的使用方法
2014/01/23 Python
使用70行Python代码实现一个递归下降解析器的教程
2015/04/17 Python
Python中常见的异常总结
2018/02/20 Python
Pandas 按索引合并数据集的方法
2018/11/15 Python
详解python:time模块用法
2019/03/25 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Joules美国官网:出色的英国风格
2017/10/30 全球购物
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
Topshop法国官网:英国快速时尚品牌
2018/04/08 全球购物
经理秘书找工作求职信
2013/12/19 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
正风肃纪查摆剖析材料
2014/10/10 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
务工证明怎么写
2015/06/18 职场文书
干货:企业内部人才推荐奖励方案!
2019/07/09 职场文书