微客导航 » 文章资讯 » 对vuex中getters计算过滤操作详解

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

2023-08-09 19:28:06 188

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

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

下面我具体介绍它的用法

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

代码如下：

constgetters={

num:function(state){

returnstate.num+=100;

}

}

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

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

代码如下:

exportdefaultnewVuex.Store({

state,

mutations,

getters,/*只关注此栏*/

actions

})

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

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

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

代码如下：



{{num}}

你看一下num为多少？

注：

store.js补充部分:

importVuefrom'vue'

importVuexfrom'vuex'

Vue.use(Vuex)

conststate={//状态对象

num:0,

},

constgetters={

age:function(state){

returnstate.num+=100;

},

exportdefaultnewVuex.Store({

state,

mutations,

getters,

actions

})

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

代码补充部分如下：

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

constmutations={//触发状态

jia(state){

state.num+=0.5

},

}

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

模板部分：



{{num}}



+

script部分：

methods:mapMutations([



'jia',

]),

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

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐