Vue核心概念Getter的使用方法
2019-01-19 00:02
1311 查看
有时候我们需要从store中的state中派生出一些状态。
如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它――无论哪种方式都不是很理想。
Vuex 允许我们在store中定义getter属性(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。
比如这里我们在Page4.vue里面需要对商品价格加倍,我们就可以使用Getter。
使用Getter
store.js,我们在state下面加入getters里面有一个商品价格加倍的方法。
// 在分离出来的vuex文件中安装 Vuex import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 每一个Vuex仓库中只能包含一个store实例 export const store = new Vuex.Store({ state: { // 把页面显示数据写在store.js文件 goodsList: [ { name: '赣州橙子', price: '8.8' }, { name: '新疆哈密瓜', price: '2.0' }, { name: '山东大枣', price: '3.2' }, { name: '阳澄湖大闸蟹', price: '10.0' } ] }, // getters是vuex中的计算属性对象 getters: { //商品价格加倍;其中goodsPriceDoubble(state)中有一个state参数表示state中的数据对象 goodsPriceDoubble: state => { let goodsPriceDoubble = state.goodsList.map(currentValue => { return { name: currentValue.name, price: currentValue.price *2 } }) return goodsPriceDoubble; } } })
在page4.vue里面修改成如下:
<ul class="ul_list"> <li v-for="item in goodsPriceTwo"> <p class="name">商品:{{item.name}}</p> <p class="price">价格:¥{{item.price}}</p> </li> </ul>
在computed中加入如下方法:
computed: { goodsPriceTwo() { //this.$store.getters.vuex getters中的对应的回调函数的函数名 return this.$store.getters.goodsPriceDoubble; } }
显示效果就是page4的商品价格加倍了。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。如果你想了解更多相关内容请查看下面相关链接
您可能感兴趣的文章:
- 如何为vuex实现带参数的 getter和state.commit
- vuex2中使用mapGetters/mapActions报错的解决方法
- 解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
- vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
- 详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
- Vuex之理解Getters的用法实例
- 谈谈因Vue.js引发关于getter和setter的思考
- Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
- Vue核心概念Action的总结
- vue.js的双向数据绑定Object.defineProperty方法的神奇之处
相关文章推荐
- Vuex(三)--Vue核心概念Getter
- 003-spring-data-elasticsearch 3.0.0.0使用【一】-spring-data之概述、核心概念、查询方法、定义Repository接口
- Lucene的一些基本使用方法和概念 (JAVA)
- java中使用Struts+Hibernate出现的No getter method for property解决方法
- java中封装类Feild和使用setter和getter方法访问封装的类Feild
- lucene.net的一些基本使用方法和概念
- 【JSP】JSTL核心标签库的使用方法和示例
- UISegmentedControl分段控件的基本概念和使用方法
- JAVA 面向对象 基础概念,匿名对象的使用,方法的重载
- sizeof的概念,使用方法及主要用途
- ZendFramework学习第三章(核心组件—过滤器之过滤器的使用方法)
- python高并发异步服务器核心库forkcore使用方法
- 【Objective-C】OC中KVO的基本概念和使用方法
- 递归函数的概念使用方法与实例
- 【iOS7的一些总结】13、UIScrollView的概念和基本使用方法
- Python:类的概念和使用方法
- CSS z-index 属性的使用方法和层级树的概念
- [Silverlight入门系列]使用MVVM模式(1):MVVM核心概念
- 数据结构教材中hash的使用及一些基本概念和方法
- Linux知识总结复习2:Linux防火墙的基本概念和使用方法(未完待续)