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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
写给想学习Javascript的朋友一点学习经验小结
Nov 23 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
jQuery中选择器小问题(新人难免遇到)
Mar 31 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JS+CSS实现的蓝色table选项卡效果
Oct 08 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
Apr 01 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
详解Vue.js中.native修饰符
Apr 24 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue报错function () { [native code] },无法出现我们想要的内容 Unknown custom element
Apr 11 Vue.js
详解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
重置版宣传动画
2020/04/09 魔兽争霸
解析php防止form重复提交的方法
2013/07/01 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
IE与Firefox下javascript getyear年份的兼容性写法
2007/12/20 Javascript
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
jquery 插件 web2.0分格的分页脚本,可用于ajax无刷新分页
2008/12/25 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
js实现的标题栏新消息闪烁提示效果
2014/06/06 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
Angularjs使用指令做表单校验的方法
2017/03/31 Javascript
Vue中div contenteditable 的光标定位方法
2018/08/25 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
python安装scipy的步骤解析
2019/09/28 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
python 实现视频 图像帧提取
2019/12/10 Python
Python print不能立即打印的解决方式
2020/02/19 Python
OpenCV 表盘指针自动读数的示例代码
2020/04/10 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python flask框架如何显示图像到web页面
2020/06/03 Python
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
四川internet信息高速公路(C#)笔试题
2012/02/29 面试题
个人违纪检讨书
2014/09/15 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
医院办公室主任岗位职责
2015/04/01 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
奖学金申请书(范文)
2019/08/14 职场文书