vuex 进阶 mapState mapGetter mapActions mapMutations

1 说明

mapState和mapGetter  获取state和getters;mapState和mapGetter是映射为计算属性=>获取数据（方便简洁写法）

mapMutations 和mapActions方便操作mutations和actions方法  ;mapMutations 和mapActions是映射为组件methods方法=>修改数据

2使用

state/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({

  state: { //存放状态
    nickname:'Simba',
    firstname:'张',
    lastname:'三丰',
    age:20,
    gender:'男',
    money:1000
  },
  getters:{
     //getters相当于vue中的计算属性，通过getters进一步处理，得到我们想要的值，而且允许传参，第一个参数就是state

    realname(state){ return state.firstname+state.lastname },
    money_us(state){ return (state.money/7).toFixed(2) } 
 },
mutations:{

  addAge(state,payLoad){
     state.age+=payLoad.number
  }

}

})

 1引入

import {mapState,mapGetter,mapActions,mapMutations} from 'vuex'

2 使用

组件内

computed: {   //computed是不能传参数的
  value(){
   return this.val/7
  },
  ...mapState(['nickname','age','gender'])

  ...mapGetters(['realname','money_us'])

//相当于

//nickname(){return this.$store.state.nickname}

//age(){return this.$store.state.age}
//gender(){return this.$store.state.gender}

}
html中使用
<div>{{nickName}}:{{age}}</div>
<div>{{realname}}</div>



mutations需要通过commit来调用其里面的方法，它也可以传入参数，第一个参数是state，第二个参数是载荷（payLoad），也就是额外的参数

子组件

   //参数我们可以在调用这个方法的时候写入

//注意  方法名称保持一致

<button @click="addAge({number:5})">测试</button>

methods:{

 ...mapMutations(['addAge'])

   //相当于 

   addAge（）{

   //调用的时候第二个参数最好写成对象形式，这样我们就可以传递更多信息。
     this.$store.commit('addAge',{
       number:5
     })
  }


}