vuex中getter的使用

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

                        },

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