转载请注明出处:
Getter对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据,起到的是包装数据的作用;
有时我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数
如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数然后在多处导入它(无论哪种方式都不是很理想)。getter就是为了解决这个问题而产生的。
应用场景:
1. 相当于state的计算属性(基于State处理成另外一份数据)
2. 模板中需要的数据和State中的数据不完全一样;需要基于state中的数据进行加工处理,形成一份新的的数据,给模板使用
特点:
1. Getter 可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
2. Store 中数据发生变化,Getter 的数据也会跟着变化。
3. getters不会修改state中的数据
使用:
1.第一 种方式:this.$store.getters.名字
是调用getters第一 种方式
//组件中调用
{{$store.getters.计算属性名}} // 不分模块
{{this.$store.getters['模块名/计算属性名']}} // 分模块
//store.js中定义
getters: {
showNum (state){
return `当前最新的数据${state.count}`
}
}
- 通过以函数映射的方式
// 1.从vuex中按需求导入mapState函数
import {maptGetters} from 'vuex'
// 通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
// 2. 将指定的mutations函数,映射为当前组件的methods函数
computed :{
...maptGetters(['showNum'])
// 不分模块
...mapGetters(['计算属性名'])
// 分模块,不重命名计算属性
...mapGetters('模块名', ['计算属性名'])
}
// 3.直接使用mapGeterrs中声明的属性
在网上找到一个demo 示例,可参考学习: https://gitee.com/xiangbaxiang/vue-store