vue-cli学习-Getters 派生状态

Getters 派生状态

在获取 state 状态时，有时需要对这个原生的值进行处理；
处理采用计算属性或辅助 mapState 均可，但每个组件都要进行处理就繁琐了；
可以使用 getters 派生来设置需要处理的 state 状态，比如给 男 加上括号

//状态派生：store/index.js
getters:{
     getGender(state){
       return '['+state.gender+']'
     }
  },
//Person.vue
{{$store.getters.getGender}}
//或者使用计算属性进行返回
{{getGender}}

computed: {
    getGender() {
      return this.$store.getters.getGender
    },
  },

如果要给 getters 传递自定义参数，方法如下：

//Person.vue
computed: {
    getGender() {
      return this.$store.getters.getGender(2)
    },
  },

//store/index.js
    //法一
    getGender:(state)=>(id)=>{
       return '['+state.gender+','+id+']'
     } 
    //法二
    getGender(state){
      return function (id){
        return '['+state.gender+','+id+']'
      }
    }

辅组函数mapGetters

    import {mapState, mapGetters} from 'vuex'

    computed: {
        //...mapGetters(['getGender']),
        ...mapGetters({
        getGender:'getGender'
    
    })
  },