vuex getters计算属性

 export default new Vuex.Store({
      //存储数据
      state:{

      },
      //方法
      mutations:{

      },
      //计算属性
      getters:{
         (1)获取,this.$store.getters.函数名
         (2)在计算属性中获取,在自定义方法中,return this.$store.getters.函数名
         (3)传入参数写法, xx:function(state){
                              return function(形参)
                              {
                                return xxx
                              }
                          }
         (4)使用mapGetters辅助获取
             1、computed:mapGetters(['函数名'])
             2、computed:mapGetters({ 键名:'state中的键名',键名:(state)=>{return state.键名}}
             2、computed:{
               ...mapGetters(['xx',xx])
             }
      },
      //异步方法,(如ajax)
      actions:{

      },
      //模块
      modules:{

      }
    })

代码示例:
组件:

<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:{

  }
})

发布了550 篇原创文章 · 获赞 3 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43294560/article/details/104626118