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

更新时间：2018年12月02日 14:37:33 作者：任重道远

这篇文章主要介绍了Vuejs监听vuex中值的变化的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

详解Electron中如何使用SQLite存储笔记
这篇文章主要为大家介绍了Electron中如何使用SQLite存储笔记示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11
浅析Vue中method与computed的区别
在new Vue的配置参数中的computed和methods都可以处理大量的逻辑代码，但是什么时候用哪个属性，要好好区分一下才能做到正确的运用vue。这篇文章主要介绍了Vue中method与computed的区别,需要的朋友可以参考下
2018-03-03
vite + electron-builder 打包配置详解
这篇文章主要为大家介绍了electron基于vite + electron-builder 打包配置详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-09-09
创建和运行Vue.js项目方法demo
这篇文章主要为大家介绍了创建和运行Vue.js项目方法demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-12-12
利用Vue.js框架实现火车票查询系统（附源码）
这篇文章主要介绍了利用Vue.js框架实现火车票查询系统的相关资料,，文中给出了详细的介绍与示例代码，并在文章结尾给出了完整的项目下载，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
vue-router使用next()跳转到指定路径时会无限循环问题
这篇文章主要介绍了vue-router使用next()跳转到指定路径时会无限循环问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue3使用vue3-print-nb实现区域打印功能
这篇文章主要给大家介绍了关于vue3使用vue3-print-nb实现区域打印功能的相关资料,在日常操作中,相信很多人在Vue怎么用插件实现打印功能问题上存在疑惑,需要的朋友可以参考下
2023-07-07
Vue计算属性与监视(侦听)属性的使用深度学习
这篇文章主要介绍了Vue计算属性与监视(侦听)属性的使用,计算属性指的是通过一系列运算之后，最终得到一个值，watch监视(侦听)器允许开发者监视数据的变化，从而针对数据的变化做特定的操作，本文就这两种属性给大家详细讲解，感兴趣的朋友一起学习吧
2022-11-11
vue项目中axios的封装请求
这篇文章主要介绍了vue项目中axios的封装请求，axios 是一个轻量的HTTP客户端，它基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，下文更多详细资料,需要的朋友可以参考一下
2022-03-03
Vue中使用crypto-js AES对称加密算法实现加密解密
在数字加密算法中，通过可划分为对称加密和非对称加密，本文主要介绍了Vue中使用crypto-js AES对称加密算法实现加密解密，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03