vuex getters计算属性

短命女 2021-07-24 11:05 454阅读 0赞

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