对vuex中getters计算过滤操作详解


Posted in Javascript onNovember 06, 2019

getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的:

getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5+100

下面我具体介绍它的用法

第一步 在store.js里用const声明我们的getters属性

代码如下:

const getters={

num:function(state){

return state.num+=100;

}

}

注:如果读者不知道store.js就是我们写vuex共用的js

第二步 在Vuex.Store()里引入getter

代码如下:

export default new Vuex.Store({

state,

mutations,

getters,/*只关注此栏*/

actions

})

第三步 在你自己创建的组件例如a.vue中computed里面进行配置

<script>

  import store from '@/store'

  import {mapState,mapMutations} from 'vuex'

  export default{

    data(){

      return{

      

      }

    },

  

  computed:{

   

   /*只关注此栏这里面采用es6的拓展运算符*/

   ...mapState(["num"]),

   num(){

   return this.$store.getters.num;

   }

   

   },

    

    

    store

    

  }

    

</script>

注:如果你不了解es6的运算符也没关系,你只要知道在里面无论你写多少state变量都没关系即可,包括getter的方法等等,再次要注意return一定要写否则报错。

第四步 在你自己创建的模板中引入测试代码

代码如下:

<div>

{{num}}

</div>

你看一下num为多少?

注:

store.js补充部分:

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const state={//状态对象

num:0,

},

const getters={

age:function(state){

return state.num+=100;

},

export default new Vuex.Store({

state,

mutations,

getters,

actions

})

注:如果你看到了100,那就说明你成功,然后你在你自己创建的模板中试一试加一个button点击事件再次观察结果看看

代码补充部分如下:

1)在store.js中添加如下代码

const mutations={//触发状态

jia(state){

state.num+=0.5

},

}

2)在你自己的组件a.vue中添加如下代码

模板部分:

<div>

{{num}}

</div>

<button @click="jia">+</button>

</div>

script部分:

methods:mapMutations([

    

    'jia',

    ]),

观察结果如果为200.5则成功。

以上这篇对vuex中getters计算过滤操作详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
提高 DHTML 页面性能
Dec 25 Javascript
JavaScript 事件查询综合
Jul 13 Javascript
jQuery下的动画处理总结
Oct 10 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
Nov 14 Javascript
Boostrap模态窗口的学习小结
Mar 28 Javascript
第二章之Bootstrap 页面排版样式
Apr 25 Javascript
用自定义图片代替原生checkbox实现全选,删除以及提交的方法
Oct 18 Javascript
vue与bootstrap实现时间选择器的示例代码
Aug 26 Javascript
利用10行js代码实现上下滚动公告效果
Dec 08 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 #Javascript
vuex实现像调用模板方法一样调用Mutations方法
Nov 06 #Javascript
vuex actions异步修改状态的实例详解
Nov 06 #Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 #Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 #Javascript
vuex存值与取值的实例
Nov 06 #Javascript
node省市区三级数据性能测评实例分析
Nov 06 #Javascript
You might like
WML,Apache,和 PHP 的介绍
2006/10/09 PHP
php中数字、字符与对象判断函数用法实例
2014/11/26 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
php截取视频指定帧为图片
2016/05/16 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
js 为label标签和div标签赋值的方法
2013/08/08 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
Validform表单验证总结篇
2016/10/31 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
nodejs中request库使用HTTPS代理的方法
2019/04/30 NodeJs
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
2020/12/02 Vue.js
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
Python 文件重命名工具代码
2009/07/26 Python
python 字符串split的用法分享
2013/03/23 Python
通过源码分析Python中的切片赋值
2017/05/08 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
Win10系统下安装labelme及json文件批量转化方法
2019/07/30 Python
python处理document文档保留原样式
2019/09/23 Python
python 实现turtle画图并导出图片格式的文件
2019/12/07 Python
CSS3实现任意图片lowpoly动画效果实例
2017/05/11 HTML / CSS
泰国第一的化妆品网站:Konvy
2018/02/25 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
配置管理计划的主要内容有哪些
2014/06/20 面试题
通信工程毕业生求职信
2013/11/16 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书