vuex getters计算属性

 export default new Vuex.Store({
      
      计算属性
      用于对state中的数据进行计算等操作,进行包装的作用
      
      getters:{
         (1)传入参数写法, xx:function(state){
                              return function(形参)
                              {
                                return xxx
                              }
                          }
         
         (2)调用:this.$store.getters.函数名
         
         (3)使用mapGetters辅助获取
             1、computed:mapGetters(['函数名'])
             2、computed:mapGetters({ 键名:'state中的键名',键名:(state)=>{return state.键名}}
             2、computed:{
               ...mapGetters(['xx',xx])
             }
        }
    })

代码示例:
组件:

<template>
  <div>

    {{$store.getters.reverse}}
     <h2>{{reverse}}</h2>
     <h3>{{reverse}}</h3>
     <h4>{{msg(2)}}</h4>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {mapGetters} from 'vuex'
  export default{
    name:'A',
    data()
    {
      return{
         count:0
      }
    },
    // computed:{

    //     reverse:function()
    //     {
    //       return this.$store.getters.reverse;
    //     }
    // },
    // computed:mapGetters(['reverse']),
    computed:{

      ...mapGetters(['msg'])
    },
    methods:{

    }
  }
</script>

<style>
</style>

store仓库:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

//仓库对象,存放多组件共用数据
export default new Vuex.Store({
  //data
  state:{
      num:0,
      age:17,
      sex:'male'
  },
  //methods,尽量在这里处理state中的状态
  mutations:{
    //这里的方法,state形参获取state中的数据
    add:function(state)
     {
       state.num++;
     },
     setNum:function(state,val)
     {
       state.num=val;
     }
  },
  //计算属性
  getters:{
    reverse:function(state)
    {
      return state.sex;
    },
    msg:function(state)
    {
      return function(val)
      {
        return val+'哈哈';
      }
    }
  },
  //异步方法(如ajax)
  actions:{

  },
  //模块
  modules:{

  }
})