弄懂vuex中的mapState、mapGetters、mapMutations、mapActions

1state

引入vuex 以后，我们需要在state中定义变量，类似于vue中的data，通过state来存放状态

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: { //存放状态
    nickname:'Simba',
    age:20,
    gender:'男'
  },
  mutations: {},
  actions: {},
  modules: {}
})

注册两个组件分别引入到app.vue中

<div id="app">
    <about> </about>
    <home> </home>
  </div>

home组件中内容

<div class="home">{{$store.state.nickname}}</div>

about组件中内容

<h1>{{$store.state.nickname}}:{{$store.state.age}}</h1>

浏览器显示结果

如图，显示出显示出相应的内容，有了vuex，我们不必在考虑组件之间的传值，直接就可以通过$store来获取不同的数据，但是如果需要vuex中的多个数据的这时候，这样写就太啰嗦了，我们可以将它定义在computed中。

Props，methods,data和computed的初始化都是在beforeCreated和created之间完成的。

例：

<template>
  <div class="home">
    {{nickname}}
  </div>
</template>
<script>
export default {
  name: 'home',
  computed:{
    nickname(){
      return this.$store.state.nickname
    }
  }
}
</script>

mapState 辅助函数

state的方法虽然引入的时候方便了，但是computed中定义的代码还是很多，而这时候vuex又给我们提供了更简便的方法mapState方法

import {mapState} from 'vuex'
export default {
  name: 'home',
  computed: mapState(['nickname','age','gender'])
}

mapState(['nickname','age','gender']) //映射哪些字段就填入哪些字段

这一句代码就相当于下面这些代码的作用

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

记住：用mapState等这种辅助函数的时候，前面的方法名和获取的属性名是一致的。
如果我们需要自定义一个计算属性怎么办呢？怎么添加呢？

毕竟现在已经成这样了 computed: mapState([‘nickname’,‘age’,‘gender’])

这时候我们就需要es6中的展开运算符：…

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

getters

getters相当于vue中的计算属性，通过getters进一步处理，得到我们想要的值，而且允许传参，第一个参数就是state

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:{
    realname(state){
      return state.firstname+state.lastname
    },
    money_us(state){
      return (state.money/7).toFixed(2)
    }
  },
  mutations: {},
  actions: {},
  modules: {}
})

vue部分

computed: {  //computed是不能传参数的
 valued(){
   return this.value/7
 },
 ...mapGetters(['realname','money_us'])
}

Mutation

我们代码中定义的时候需要些mutations，它类似于vue中的methods，

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

代码如下

mutations: { //类似于methods
  addAge(state,payLoad){
     state.age+=payLoad.number
  }
}

template部分

<div class="home">
   <div><button @click="test">测试</button></div>
</div>

js部分

methods:{
 test(){
   this.$store.commit('addAge',{
     number:5
   })
 }
}

调用的时候第二个参数最好写成对象形式，这样我们就可以传递更多信息。

但是，这样写还是会遇到同样的问题，就是如果需要操作多个数据，就会变的麻烦，这时候我们就需要mapMutations，通过它将方法映射过来

mapMutations

跟mapState、mapGetters一样

methods:{
 ...mapMutations(['addAge'])
}

mapMutations([‘addAge’])这一句就相当于下面的代码

addAge(payLoad){
  this.$store.commit('addAge',payLoad)
}

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

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