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

                        },

这样数据就在组件身上了!

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐