Vue核心概念Getter的使用方法


Posted in Javascript onJanuary 18, 2019

有时候我们需要从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的商品价格加倍了。

Vue核心概念Getter的使用方法

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
extjs grid设置某列背景颜色和字体颜色的方法
Sep 03 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
js style动态设置table高度
Oct 21 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
Mar 03 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
jQuery组件easyui对话框实现代码
Aug 25 Javascript
js实现登录验证码
Dec 22 Javascript
利用n工具轻松管理Node.js的版本
Apr 21 Javascript
Vue中render函数的使用方法
Jan 31 Javascript
JS实现table表格内针对某列内容进行即时搜索筛选功能
May 11 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
使用js和canvas实现时钟效果
Sep 08 Javascript
Vue唯一可以更改vuex实例中state数据状态的属性对象Mutation的讲解
Jan 18 #Javascript
JavaScript数据结构之栈实例用法
Jan 18 #Javascript
Vue核心概念Action的总结
Jan 18 #Javascript
js取小数点后两位四种方法
Jan 18 #Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 #jQuery
jquery获取file表单选择文件的路径、名字、大小、类型
Jan 18 #jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 #jQuery
You might like
Can't create/write to file 'C:\WINDOWS\TEMP\...MYSQL报错解决方法
2011/06/30 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
Node.js:Windows7下搭建的Node.js服务(来玩玩服务器端的javascript吧,这可不是前端js插件)
2011/06/27 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
javascript中2个感叹号的用法实例详解
2014/09/04 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
2018/02/27 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
2018/12/05 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
django连接mysql配置方法总结(推荐)
2018/08/18 Python
selenium + python 获取table数据的示例讲解
2018/10/13 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python调用matlab的m自定义函数方法
2019/02/18 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python字符串的拼接方法总结
2019/11/18 Python
tensorflow之tf.record实现存浮点数数组
2020/02/17 Python
python为什么会环境变量设置不成功
2020/06/23 Python
详解在Python中使用Torchmoji将文本转换为表情符号
2020/07/27 Python
企划专员岗位职责
2013/12/09 职场文书
法制宣传月活动方案
2014/05/11 职场文书
班训口号大全
2014/06/18 职场文书
休学证明范本
2015/06/19 职场文书
高一军训感想
2015/08/07 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
python脚本框架webpy模板赋值实现
2021/11/20 Python