Vuex的基本使用3（四个map方法的使用）在前面的文章里，我们分别讲Vuex如何利用state与mutations、a

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第八天，点击查看活动详情。

前言

在前面的文章里，我们分别讲了Vuex如何利用state与mutations、actions进行集中状态的管理以及Vuex通过getters对state中的数据进行加工。在本文我们将会继续进行Vuex的讲解。

mapState、mapGetters的使用

概念

mapState方法： 用于帮助我们映射state中的数据为计算属性
mapGetters方法： 用于帮助我们映射getters中的数据为计算属性
mapActions方法： 用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
mapMutations方法： 用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

好了，我们现在知道了有这四个map方法了，那么有人就要问了我们该啥时候去使用以及如何使用呢？不着急，我们先用一个小案例来看一下。

案例

现在我在store的state中定义了一个有关人员信息的对象数组

    const state= {
        peopleList: [
           {name:"张三",age:13,hobby:{type:"sport",hobbyName:"打篮球"}},
           {name:"李四",age:18,hobby:{type:"art",hobbyName:"画画"}},
           {name:"王五",age:21,hobby:{type:"sport",hobbyName:"踢足球"}},
           {name:"陆六",age:16,hobby:{type:"word",hobbyName:"写作"}},
           {name:"燕七",age:15,hobby:{type:"art",hobbyName:"sing"}}
        ]
    }

我把它展示在组件中

people.vue

    <ul>
      <li v-for="(item, index) in $store.state.peopleList" :key="index">
          {{ item.name }}--{{item.age}}--{{item.hobby.type}}--{{item.hobby.hobbyName}}
      </li>
    </ul>

效果也没什么问题

但现在如果我要分开展示名字年龄和爱好，我是不是得这么写

v-for="item in $store.state.peopleList.....

写两遍，但之后只要我请求人员列表的数据我就得在模板写 $store.state.peopeoList没得商量，那我再来个monkeyList、birdList是不是都得这么写，我们是不是希望$ store.state.peopeoList、 $store.state.monkeyList、$ store.state.birdList是这样peopleList、monkeyList、birdList。之前我们是在计算属性中返回，但要是有更多的数据10个、20个...我们再这样写是不是有些麻烦？所以，vue官方给我们提供了map方法可以让我们简化配置。现在我们来尝试一下！

people.vue

引入方法

import {mapState} from 'vuex'

计算属性中定义

 computed: { 
 //数组写法
//注意名字左边为你要在模板中使用的名字，右边为state中定义的名字 ...mapState({peopleList:'peopleList',monkeyList:'monkeyList',peopleList:'birdList'}),   
//若左右名字都一样，也可以用对象写法
...mapState(['peopleList','monkeyList','birdList'])
    },

模板中使用

    <ul>
      <li v-for="(item, index) in peopleList" :key="index">
          {{ item.name }}--{{item.age}}--{{item.hobby.type}}--{{item.hobby.hobbyName}}
      </li>
    </ul>

效果

而mapGetters的使用方法与mapState一样，也是引入->计算属性中定义->模板中使用。

mapActions、mapMutations的使用

mapActions、mapMutations的使用方法也类似，先引入再在methods中定义，最后绑定方法即可。我们下面演示一下！

我们在页面中定义一个数0，在store的action中方法中定义偶数就让他加1，奇数不加，在mutations中我们定义加法。

store中

 const state={
      sum:0
 }
 const actions= {
      addEven(context,value){
        console.log(context,value);
        if(context.state.sum%2==0){
            context.commit('add', value)
        }
      }
    }
    const mutations = {
      add(state, value) {
            state.sum += value
        }
    }

sum.vue中

引入

import { mapActions,mapMutations } from "vuex";

定义

methods: {
    //对象形式
    // ...mapActions({addEven:'addEven'})

    //数组形式
    ...mapActions(["addEven"]),
    //对象形式
    // ...mapMutations({add:'add''}),

    //数组形式
    ...mapMutations(["add"]),
  },

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象event。

模板中使用

    <h3>合为：{{ $store.state.sum }}</h3>
    <button @click="add(1)">加一</button>
    <button @click="addEven(1)">偶数时加一</button>

效果

计算合.gif

总结

好了，以上就是今天的所有内容，我们下期将对Vuex的模块化+命名空间进行讲解，希望大家能够学到一点东西！