您现在的位置是：网站首页> 编程资料编程资料

vuex中getters的基本用法解读_vue.js_

2023-05-24 348人已围观

简介 vuex中getters的基本用法解读_vue.js_

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']) }

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

您可能感兴趣的文章:

上一篇：JavaScript 对象新增方法defineProperty与keys的使用说明_javascript技巧_

下一篇：JS前端同源策略和跨域及防抖节流详解_JavaScript_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网