Vue学习第25天——Vuex中的4个map方法的基本用法及案例练习

前言

看这篇文章的前提是我们已经掌握vuex和vuex中的getters，如果不了解，可以看这两篇
1、vuex安装和使用详解以及案例
2、vuex中的getter详解和案例练习

一、4个map方法用途和概念

用途

用来生成重复代码的，减少代码繁杂。
比如$store.state.sum在组件中多次调用，我们可以通过mapState函数返回一个对象sum，这样在组件使用的地方直接使用sum就行

1、mapState

① 官方说明：

当一个组件需要获取多个状态的时候，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

② 理解：用于映射state中的数据为计算属性
③ 特点：mapState函数返回的是一个对象
④ 2种书写方法：
（当映射的计算属性的名称与 state 的子节点名称相同时，也可以给 mapState 传一个字符串数组。）

computed: {
    //对象写法
    ...mapState({sum: "sum",num:"num"})
    //字符串数组写法
    ...mapState(["sum", "num"]),
),
1
2
3
4
5
6

2、mapGetters

① 官方说明：

mapGetters辅助函数仅仅是将 store 中的 getter 映射到局部计算属性

② 理解：用于映射getters中的数据为计算属性
③ 特点：mapGetter函数返回的是一个对象
④ 2种写法

computed: {
    //对象写法
    ...mapGetters({sum: "sum",num:"num"})
    //字符串数组写法
    ...mapGetters(["sum", "num"]),
),
1
2
3
4
5
6

3、mapActions

① 官方说明：

mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）

② 理解：用于生成与actions对话的方法，即包含 $store.dispatch(xxx) 的函数
③ 特点：mapAction函数返回的是一个对象
④ 2种写法

methods: {
    //对象写法
    ...mapActions({add: "ADD",odd:"ODD"})
    //字符串数组写法
    ...mapActions(["ADD", "ODD"]),
),
1
2
3
4
5
6

4、mapMutations

① 官方说明

mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）

② 理解：用于生成与mutations对话的方法，即包含 $store.commit(xxx) 的函数
③ 特点：mapMutation函数返回的是一个对象
④ 2种写法

methods: {
    //对象写法
    ...mapMutations({add: "ADD",odd:"ODD"})
    //字符串数组写法
    ...mapGetters(["ADD", "ODD"]),
),
1
2
3
4
5
6

二、map方法案例练习

需求：点击按钮求和

1、不用map方法

store/index.js代码

//引入vue
import Vue from "vue";

//引入vuex库
import Vuex from "vuex";

// 使用vuex
Vue.use(Vuex);

const actions = {
    //数据需要业务逻辑判断
    odd(context,num){
        if(context.state.sum % 2 != 0) {
            context.commit("ODD",num)
        }
    }
};

const mutations = {
    ADD(state,num){
        state.sum +=num;
    },
    ODD(state,num){
        state.sum +=num;
    }
};

const state = {
    sum:0,
};

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

组件count代码

<template>
  <div>
    <h3>当前求和为：{{$store.state.sum}}h3>
    <select @click="selectNum($event)">
      <option value="1">1option>
      <option value="2">2option>
      <option value="3">3option>
    select>
    <button @click="addNum(num)">+button>
    <button @click="oddNum">sum为奇数再加button>
    <h3>将sum放大十倍后的和为：{{$store.getters.bigSum}}h3>
  div>
template>

<script>
export default {
  name: 'Count',
  data(){
    return {
      num:1,
    }
  },
  methods:{
    selectNum(){
      this.num = Number(event.target.value)
    },
   addNum(){
      this.$store.commit("ADD",this.num)
    },
    oddNum(){
      this.$store.dispatch("odd",this.num)
    }
  },
}
script>

<style>
button {
  margin-left: 5px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

运行结果

2、通过4个map方法实现

count组件代码如下（index.js代码不变）

<template>
  <div>
    <h3>当前求和为：{{sum}}h3>
    <select @click="selectNum($event)">
      <option value="1">1option>
      <option value="2">2option>
      <option value="3">3option>
    select>
    <button @click="addNum(num)">+button>
    <button @click="oddNum(num)">sum为奇数再加button>
    <h3>将sum放大十倍后的和为：{{$store.getters.bigSum}}h3>
  div>
template>

<script>
//引入4个map方法
import {mapState,mapGetters,mapActions,mapMutations}  from "vuex";
export default {
  name: 'Count',
  data(){
    return {
      num:1,
    }
  },
  methods:{
    selectNum(){
      this.num = Number(event.target.value)
    },
    //通过mapMutations生成与mutations对话的$store.commit(xxx)函数
    ...mapMutations({addNum:'ADD'}),
      //通过mapActions生成与actions对话的$store.dispatch(xxx)函数
    ...mapActions({oddNum:"odd"})
  },
  computed:{
    //通过mapState映射state中的数据为计算属性
    ...mapState(['sum']),
    //通过mapGetters映射getters中的数据为计算属性
    ...mapGetters(['bigSum'])
  }
}
script>

<style>
button {
  margin-left: 5px;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

三、注意项

1、4个map方法返回值的都是一个对象

2、4个map方法都有两种写法，一种对象，一种字符串数组

3、mapState和mapGetter都是写在computed中，mapActions和mapMutations都是写在methods中

4、mapActions和mapMutation使用时，如果需要传递参数，需要在模板中绑定事件时传递好参数，否则参数将会是事件对象

当绑定事件不传递参数时，运行结果

5、mapState和mapGetters生成的结果在开发者工具的 vuex bindings 中显示