vuex中getters的基本用法解读

目录
  • getters的基本用法解读
    • 一、getter 定义
    • 二、使用方法
    • 三、mapGetters辅助函数
    • 四、getters注意事项
  • getters的两种调用方法
    • 方法一
    • 方法二

getters的基本用法解读

一、getter 定义

Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作。

就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算

二、使用方法

1、通过属性访问

Getter 接受 state 作为其第一个参数:

example:现在需要获取list:[1,2,3,4,5,6,7,8,9]中大于5的元素

const store = new Vuex.Store({
   state:{
       list: [1,2,3,4,5,6,7,8,9]
       } ,
    getters: {
        getNumber: state => {
            retrun state.list.filter(item => item > 5)
        }
    }   
})

在.vue中使用

computed:{
    getNumber(){
        return this.$store.getters.getNumber
    }
}

2、通过方法访问

同样的数组list 需要根据不同的条件返回不同的数据

通过让 getter 返回一个函数,来实现给 getter 传参

const store = new Vuex.Store({
   state:{
       list: [1,2,3,4,5,6,7,8,9]
       } ,
    getters: {
        getNumber: state => (index) => {
            return state.list.filter(item => item > index)
        }
    }   
})

在.vue中使用

computed:{
    getNumber(){
        return this.$store.getters.getNumber(4)
    }
}

3、依赖于已存在的getters

example: 获取list中大于5的数字的个数

注意:如果getters返回的是一个方法,不能用这种方式

const store = new Vuex.Store({
   state:{
       list: [1,2,3,4,5,6,7,8,9]
       } ,
    getters: {
        getNumber: state => {
            return state.list.filter(item => item > 6)
        },
        getNumberLength: (state, getters) = > {
            return getters.getNumber.length
        }
    }   
})

三、mapGetters辅助函数

mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性:

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}

如果你想将一个 getter 属性另取一个名字,使用对象形式:

import { mapGetters } from 'vuex'
export default {
  // ...
  computed: {
    ...mapGetters({
    // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
    doneCount: 'doneTodosCount'
    })
  }
}

四、getters注意事项

1、data中定义的属性名称不能和computed中定义的getter名称相同,否则会报错

2、vuex中state和getter中可以定义同名属性,互不干扰

getters的两种调用方法

getters和state用法相似,有点像vue中里面的data 和computed两个之间的关系

使用:

state: {
        count:0,
    },    
getters:{
        countAdd(state){
            return state.count + 1
        }
    },

方法一

this.$store.getters.xxx 

xxx是getters里面的名称

方法二

import { mapGetters } from 'vuex'
.....
computed:{
    ...mapGetters(['countAdd'])
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vuex中...mapstate和...mapgetters的区别及说明

    目录 ...mapstate和...mapgetters的区别 …mapstate …mapGetters vuex mapState mapGetters用法及多个module下用法 一.mapState 二.mapGetters 三.mapActions.mapMutations ...mapstate和...mapgetters的区别 …mapstate 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮

  • Vuex中如何getters动态获取state的值

    目录 Vuex getters动态获取state的值 案例 说明 Vuex state值更改但是getters未更新 实现效果 Vuex getters动态获取state的值 在做项目时,getters里有很多冗余代码,但是仔细一看可以根据参数来解决,于是决定使用传参来进行获取,减少代码冗余. 案例 需求:在getters里能够根据值动态获取到people的元素.经过多次尝试,最终得到下面的代码. state.js代码如下: export default { people: [ { name:

  • 记一次vuex的mapGetters无效原因及解决

    目录 vuex的mapGetters无效原因 vuex mapGetters语法报错(Unexpected token) 解决方案 vuex的mapGetters无效原因 报错是(error during evaluation),见下图. 代码大概是下面这样, import store from './store.js' computed: { ...mapGetters('project', [ 'isOpenSupplyNeed', ]), a(){ return store.getters

  • vuex通过getters访问数据为undefined问题及解决

    目录 getters访问数据为undefined问题 写一个类似例子 vuex getters(组件mounted调用)使用注意 逻辑 解决方案 getters访问数据为undefined问题 本篇文章可能对你的帮助不大, 只是个人开发中的一些记录.不同的业务和应用场景可能问题不同. 在通过 uni-app 开发商城时,用户快捷登录之后,服务器返回一个 token 数据,我将其同步到 vuex module下的 user 模块中. 然后从登录页返回到用户页,并发起 http 请求,获取用户的个人

  • VueX mapGetters获取Modules中的Getters方式

    目录 VueX mapGetters获取Modules的Getters mapGetters的使用及简单实现原理 项目中的mapGetters mapGetters简单实现原理 VueX mapGetters获取Modules的Getters 注明 : permission 是你要获取的Modules中的哪一个 (permission 即是 模块名);         ...mapGetters("permission",[             'ReturnRoutes'    

  • vuex中getters的基本用法解读

    目录 getters的基本用法解读 一.getter 定义 二.使用方法 三.mapGetters辅助函数 四.getters注意事项 getters的两种调用方法 方法一 方法二 getters的基本用法解读 一.getter 定义 Vuex允许我们在store中定义"getter" ,用于对state中存储的数据进行过滤操作. 就像vue生命周期中的computed一样,getter的返回值 会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算 二.使用方法 1.通

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

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

  • 详解Vuex中getters的使用教程

    目录 简介 说明 官网 getters概述 说明 来源 用法 示例 测试 简介 说明 本文用示例介绍Vuex的五大核心之一:getters. 官网 Getter | Vuex API 参考 | Vuex getters概述 说明 getters 是Store的计算属性,可以对State进行计算操作.就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算. 虽然组件内也可以做计算属性,但getters 可以在多组件之间复用.如果一个状态只在一个

  • Vuex中getters和actions的使用补充说明

    前置说明 1.Vue2.x 和 Vue3.x区别: 在Vue3.x中, 没有辅助函数. 其他关于Vuex的使用没有区别. 2. 此处只对于Vuex的几个属性中的使用做扩展补充. getters补充 当getters写在子模块中时, getters属性中的方法, 全参共有4个参数 getters: { /** * 形参说明: * state: 表示当前模块中的satate * getters: 表示当前模块中的getters对象, 一般是操作同级的其他方法 * rootState: 表示主模块的s

  • 详解Vuex中mapState的具体用法

    今天使用Vuex的时候遇到一个坑,也可以说是自己的无知吧,折腾了好久,终于发现自己代码的错误了.真是天雷滚滚~~~~~~ index.js import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters' Vue.use(Vuex) const state = { userI

  • C#事件中关于sender的用法解读

    目录 C#事件sender的小用法 一.什么是sender 二.小用法 C#事件中sender和e参数的理解 C#事件sender的小用法 开WPF新坑了,看了WPF的炫酷界面,再看看winForm实在是有些惨不忍睹(逃).后面会开始写一些短的学习笔记. 一.什么是sender sender最常见到的情况就是下图参数列表中的这个了…可能平时没多少注意. private void Button_Click(object sender, RoutedEventArgs e) { //--blahbl

  • Pycharm中的Python Console用法解读

    目录 Pycharm Python Console用法 PyCharm python console不见了怎么办 总结 Pycharm Python Console用法 Pycharm的下方工具栏中有两个窗口:Python Console和Terminal(如下图) Terminal叫做终端,即命令行模式(命令行模式与系统的CMD(命令提示符)一样,可以运行各种系统命令); Python Console叫做Python控制台,即Python交互模式(Python交互模式主要有两种:CPython

  • 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中mapState,mapGetters,mapMutations,mapActions的作用

    在开始接触vuex框架的时候对那些state,action,mutation,getter等理解的还挺顺利的,然后突然出来一种加了一个前缀的mapState等,这样的就有点蒙圈了...特别是官方的文档并没有给除详细的说明跟例子...然后就自己慢慢理解了一下.其实也就是一个重命名而已...以下就是例子,希望能帮助理解: 在store中代码 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); const store = new V

  • Vuex中状态管理器的使用详解

    目录 一.Vuex是什么? 二.什么时候使用Vuex 三.Vuex的核心概念和API 四.应用举例 五.vuex中各种辅助函数的用法,可以使我们更加方便的运用vuex 一.Vuex是什么? Vuex在Vue项目开发时使用的状态管理工具.简单来说,就是对Vue的应用中多个组件的共享状态进行集中式的管理(读/写) Vuex实现了一个单向数据流,在全局拥有一个State存放数据,当组件要更改State中的数据时,必须通过Mutation进行,Mutation同时提供了订阅者模式供外部插件调用获取Sta

随机推荐