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 相关文章推荐
JavaScript 内置对象属性及方法集合
Jul 04 Javascript
js(jQuery)获取时间的方法及常用时间类搜集
Oct 23 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
基于jquery实现智能表单验证操作
May 09 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
Aug 02 Javascript
详解Vue.use自定义自己的全局组件
Jun 14 Javascript
如何重置vue打印变量的显示方式
Dec 06 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 Vue.js
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
PHP无限分类的类
2007/01/02 PHP
PHP中的use关键字概述
2014/07/23 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
Div自动滚动到末尾的代码
2008/10/26 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
js实现分享到随页面滚动而滑动效果的方法
2015/04/10 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
2016/01/19 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
2018/05/15 Javascript
微信小程序实现滑动切换自定义页码的方法分析
2018/12/29 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
vue+koa2实现session、token登陆状态验证的示例
2019/08/30 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
import的本质解析
2017/10/30 Python
pandas中去除指定字符的实例
2018/05/18 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
pyqt5对用qt designer设计的窗体实现弹出子窗口的示例
2019/06/19 Python
Python如何实现动态数组
2019/11/02 Python
Python 获取命令行参数内容及参数个数的实例
2019/12/20 Python
Keras之自定义损失(loss)函数用法说明
2020/06/10 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
彪马美国官网:PUMA美国
2017/03/09 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
制药工程专业职业生涯规划范文
2014/03/10 职场文书
静心口服夜广告词
2014/03/20 职场文书
2015感人爱情寄语
2015/02/26 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
数学复习课教学反思
2016/02/18 职场文书
高中英语教学反思范文
2016/03/02 职场文书