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

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计算过滤操作详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 说说Vuex的getters属性的具体用法

    什么是getters 在介绍state中我们了解到,在Store仓库里,state就是用来存放数据,若是对数据进行处理输出,比如数据要过滤,一般我们可以写到computed中.但是如果很多组件都使用这个过滤后的数据,比如饼状图组件和曲线图组件,我们是否可以把这个数据抽提出来共享?这就是getters存在的意义.我们可以认为,[getters]是store的计算属性. 源码分析 wrapGetters初始化getters,接受3个参数,store表示当前的Store实例,moduleGetters

  • Vue filters过滤器的使用方法

    本文实例为大家分享了Vue filters过滤器使用,供大家参考,具体内容如下 实例 先来看看一段代码理解下 html <div id="app"> {{message | filters2| filters3(true,priceCount)}} </div> js var app = new Vue({ el: "#app", data: { message: 199, priceCount:.8 }, filters:{ filters

  • Vue核心概念Getter的使用方法

    Vue核心概念Getter的使用方法

    有时候我们需要从store中的state中派生出一些状态. 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它--无论哪种方式都不是很理想. Vuex 允许我们在store中定义getter属性(可以认为是 store 的计算属性).就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 比如这里我们在Page4.vue里面需要对商品价格加倍,我们就可以使用Getter. 使用Getter store

  • 如何为vuex实现带参数的 getter和state.commit

    getter 带参数 参考: https://vuex.vuejs.org/guide/getters.html#method-style-access 或者: https://stackoverflow.com/questions/37763828/javascript-es6-double-arrow-functions 官方例子: getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(tod

  • vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用

    一.介绍 vuex里面的四大金刚:State, Mutations,Actions,Getters (上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用:这是一些简单的vue的小组件方法: http://www.jb51.net/article/138230.htm) 何为四大金刚? 1.State (这里可以是 小写的 state,跟官网保持一致,采用大写,因为个人习惯,后面的代码介绍采用小写) vuex的状态管理,需要依赖

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

    getter这个概念其实我们写的时候感觉好像和Mutations修改状态一样,实际上它们是有区别的: getters比较死板,如果你的百度钱包只有在金额为100才能提现,那么你在写提现页面,它是早已固定好的,而Mutation不一样,当你点击百度钱包提现,你哪怕是一元,它只要你点击了便可以提现,而且getters它是不需要什么点击,它就存在,只要你写了,这是什么意思,就是说假设你百度钱包为0,你存在了getter它就有100元,而你如果写许多百度经验,百度再次发红包0.5元时它就是100+0.5

  • Vuex中actions的使用教程详解

    Vuex中actions的使用教程详解

    目录 简介 说明 官网 actions概述 说明 特点 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:actions. 官网 Action | Vuex API 参考 | Vuex actions概述 说明 Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler).这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数. 特点 1.异步操作,通过m

  • 对pyqt5中QTabWidget的相关操作详解

    首先,下面贴上designer处理的界面文件(转换成py后的): # -*- coding: utf-8 -*- # Form implementation generated from reading ui file 'TabWidget.ui' # # Created by: PyQt5 UI code generator 5.12.1 # # WARNING! All changes made in this file will be lost! from PyQt5 import QtC

  • Python Numpy中数组的集合操作详解

    我们知道两个 set 对象之间,可以取交集.并集.差集.对称差集,举个例子: s1 = {1, 2, 3} s2 = {2, 3, 4} """ &: 交集 |: 并集  -: 差集 ^: 对称差集 """ # 以下几种方式是等价的 # 但是一般我们都会使用操作符来进行处理,因为比较方便 print(s1 & s1) print(s1.intersection(s2)) print(set.intersection(s1, s2)

  • RxSwift使用技巧之过滤操作详解

    RxSwift使用技巧之过滤操作详解

    前言 在前面的基础之上接下来我会介绍一些常用的函数和实用技巧.首先,本文将会介绍那些用于对 next 事件进行过滤的操作.这些过滤操作类似于 Swift 标准库中的 filter 操作.它能在我们开始真正进行业务处理前先把那些不符合条件的过滤掉,而且这种函数式编程的范式也能开阔我们的思维. Ignore 过滤 RxSwift 中最简单直接的过滤操作就是 ignoreElements 了.该操作会屏蔽所有的 next 事件,只会将注意力放在 error 和 completed 事件上.如下图所示,

  • MongoDB中如何使用JOIN操作详解

    前言 MongoDB是由C++语言所编写的一种面向文档的非关系型数据库(是一种NoSql数据库实现),也是介于关系型数据库和非关系型数据库之间的数据存储产品,而众所周知SQL与NoSQL最大的不同之一就是不支持JOIN,在传统的数据库中,SQL JOIN子句允许你使用普通的字段,在两个或者是更多表中的组合表中的每行数据.例如,如果你有表books和publishers,你可以像下面这样写命令: SELECT book.title, publisher.name FROM book LEFT JO

  • nodejs中密码加密处理操作详解

    本文实例讲述了nodejs中密码加密处理操作.分享给大家供大家参考,具体如下: 一.关于node加密模块crypto的介绍 其实就是使用MD5加密的,不太安全,在实际开发中根据自己的方案进行加盐处理 二.在路由视图中使用加密方式 1.导入node自带的加密模块(不需要安装) //导入加密模块 const crypto = require("crypto"); 2.做一个用户注册,密码加密的视图 <div class="col-md-6"> <h4&

  • Python中xlsx文件转置操作详解(行转列和列转行)

    Python中xlsx文件转置操作详解(行转列和列转行)

    目录 1.原始数据是这样的 2.脚本如下: 3.运行脚本后生成的xlsx文件,如下: 附:pivot方法即可完成行转列哦 总结 1.原始数据是这样的 2.脚本如下: import pandas as pd df = pd.read_excel(r'E:\untitled1\带宽测试\temp.xlsx') # 读取需要转置的文件 df = df.T # 转置 df.to_excel(r'E:\untitled1\带宽测试\TestResult.xlsx') # 另存为xlsx文件 3.运行脚本后

  • vue中的计算属性实例详解

    vue中的计算属性实例详解

    什么是计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的.在模板中放入太多的逻辑会让模板过重且难以维护.例如: <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里的表达式包含3个操作,并不是很清晰,所以遇到复杂逻辑时应该使用Vue特带的计算属性computed来进行处理. 计算属性(computed)用于处理复杂逻辑 computed:{ } compu

  • Go语言中的上下文取消操作详解

    Go语言中的上下文取消操作详解

    前言 许多使用Go的人,都会用到它的上下文库.大多数使用 context 进行下游操作,比如发出HTTP调用,或者从数据库获取数据,或者在协程中执行异步操作.最常见的用法是传递可由所有下游操作使用的公共数据.然而,一个不太为人所知,但非常有用的上下文特性是,它能够在中途取消或停止一个操作. 本篇文章将解释我们如何利用上下文库的取消特性,并通过一些模式和最佳实践来使用取消,使你的程序更快.更健壮. 为什么需要取消? 简而言之,我们需要取消,以防止我们的系统做不不需要的工作. 考虑HTTP服务器对数

随机推荐