对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 相关文章推荐
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javascript 日期时间 转换的方法
Feb 21 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
浅析JS运动
Dec 28 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
js实现前端分页页码管理
Jan 06 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 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
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
php遍历CSV类实例
2015/04/14 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
HTML颜色选择器实现代码
2010/11/23 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
2015/11/02 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
代码详解JS操作剪贴板
2018/02/11 Javascript
webpack4 入门最简单的例子介绍
2018/09/05 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
JavaScript设计模式之观察者模式实例详解
2019/01/16 Javascript
改变layer confirm弹窗按钮的颜色方法
2019/09/12 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
2020/04/11 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
nuxt引入组件和公共样式的操作
2020/11/05 Javascript
[01:32:50]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第一场 1月25日
2021/03/11 DOTA
[47:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第二场 3月4日
2021/03/11 DOTA
python网络编程之UDP通信实例(含服务器端、客户端、UDP广播例子)
2014/04/25 Python
Python中max函数用法实例分析
2015/07/17 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
Python爬虫框架Scrapy实例代码
2018/03/04 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
Python绘制热力图示例
2019/09/27 Python
python 的topk算法实例
2020/04/02 Python
美国孕妇装品牌:Destination Maternity
2018/02/04 全球购物
工程造价专业大学生自荐信
2013/10/01 职场文书
财务与信息服务专业推荐信
2013/11/28 职场文书
销售经理岗位职责
2014/03/16 职场文书
学生通报表扬范文
2015/05/04 职场文书
Python常用配置文件ini、json、yaml读写总结
2021/07/09 Python