vuex中getter的使用
vuex中getter的主要目的是为了数据过滤,得到自己想要的数据,先说如果不使用getters,功能一样可以完成,使用...
vuex中getter的主要目的是为了数据过滤,得到自己想要的数据,先说如果不使用getters,功能一样可以完成,使用...mapstate,直接请看下图:
看,当前组件是可以获取到goodInfo下的spuSaleAttrList的,但是麻烦点有两个
1.要保证你写的路径是正确的,由于路径过长,极有可能出错,影响开发效率,你要确定是哪个小仓库(模块化思想)
2.代码冗长,本可以使用getters当然能用最少的代码避免不必要的问题是最优选择
让我们来看看getters的优点吧!直接看下图:
直接这么写肯定得不到效果,我们要在vuex的getters对象中配置
// 利用getter简化路径
const getters = {
// 产品售卖属性的变化
spuSaleAttrList(state){
return state.goodInfo.spuSaleAttrList||[]
}
}
步骤:
1.先将请求成功的数据保存至state中,例如goodInfo:
我们打印出发现想要的数据在goodInfo下的spuSaleAttrList
2.在getters中简化代码,和计算属性写法相同,也是需要返回值,并且数据没有来得及返回所以要默认定义为空数组或者空对象(这要依据返回的数据类型)
const getters = {
// 产品售卖属性的变化
spuSaleAttrList(state){
return state.goodInfo.spuSaleAttrList||[]
}
}
3.在需要数据的组件引入mapGetters
import {mapGetters} from 'vuex'
4.在计算属性中使用,注意,mapGetters的参数是一个数组,而mapState的参数是一个对象
computed:{
...mapGetters(['spuSaleAttrList'])
},
这样数据就在组件身上了!
更多推荐
所有评论(0)