【Vue | 补洞 | 02】mapState 一行代码获取 vuex 所有数据

​  欢迎持续关注新系列文章 [Vue 补洞] 系列，用久了 Vue2 总有一些遗漏的知识点，通过该系列文章一起查漏补缺！

1、目的

  简化代码，减少重复工作

  当 state 中的数据有多个时，我们可能会这么写：

<template>
  <div>
    <h2>用户名：{{ $store.state.userName }}</h2>
    <h2>年龄：{{ $store.state.age }}</h2>
    <h2>户籍：{{ $store.state.address }}</h2>
  </div>
</template>

  但这么写，在插值语句中显得过于臃肿，因此我们可能会改成这样：

<template>
  <div>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
export default {
  computed: {
    userName () {
      return this.$store.state.userName
    },
    age(){
      return this.$store.state.age
    },
    address(){
      return this.$store.state.address
    }
  }
}
</script>

  但仍然可以看到，在 computed 中我们仍然重复地编写 this.$store.state 这个语句。为了解决这个问题，vuex 提供了一个方法：mapState

  设有如下 store/index.js，下文代码均以此数据为例进行讲解

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const state = {
  userName: 'Jokerls',
  age: 18,
  address: '潮州',
  projectList: ['Vue', 'HTML', 'JavaScript'],
}
const actions = {
  addProject(context, value) {
    context.commit('ADD_PROJECT', value)
  },
}
const mutations = {
  ADD_PROJECT(state, value) {
    state.projectList.push(value)
  },
}
const getters = {
  userFullName(state) {
    return state.userName + '乐乐'
  },
}

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters,
})

2、state 写法

1. 对象写法

  注：为了看清 key-value 的关系，此处用老土的变量来标识

<template>
  <div>
    <h2>用户名：{{ a }}</h2>
    <h2>年龄：{{ b }}</h2>
    <h2>户籍：{{ c }}</h2>
  </div>
</template>

<script>
// 1.引入 mapState 方法
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      a: 'userName',
      b: 'age',
      c: 'address',
    })
  }
}
</script>

2. 数组写法

<template>
  <div>
    <h2>用户名：{{ userName }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>户籍：{{ address }}</h2>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    // 1.对象写法
    // ...mapState({
    //   a: 'userName',
    //   b: 'age',
    //   c: 'address',
    // })
      
    // 2.数组写法
    ...mapState(['userName', 'age', 'address'])
      
    // 数组写法等价于：
    // userName () {
    //   return this.$store.state.userName
    // }
    // ...
  }
}
</script>

3、dispatch 写法

  注：为了避免重复的模板代码干扰学习，下方的代码都将只写关键语句

  注意！ 因为 mapActions 和 mapMutations 生成的函数 接收一个参数，用于指定操作哪个数据，因此，必须在@click的事件中传入参数

1. 对象写法

<button @click="a('react')">添加科目</button>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions({
      a: 'addProject'
    })
  }
}
</script>

2. 数组写法

<button @click="addProject('react')">添加科目</button>

<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    // 1.对象写法
    // ...mapActions({
    //   a: 'addProject'
    // })
      
    // 2.数组写法
    ...mapActions(['addProject'])
  }
}
</script>

4、commit 写法

1. 对象写法

<button @click="a('react')">添加科目</button>

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations({
      a: 'ADD_PROJECT'
    })
  }
}
</script>

2. 数组写法

<button @click="ADD_PROJECT('react')">添加科目</button>

<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
	// 1.对象写法
    // ...mapMutations({
    //   a: 'ADD_PROJECT'
    // }),
      
    // 2.数组写法
    ...mapMutations(['ADD_PROJECT'])
  }
}
</script>

5、getters 写法

1. 对象写法

<h2>用户名：{{ fullName }}</h2>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  computed: {
    ...mapGetters({
      fullName: 'userFullName'
    })
  }
}

2. 数组写法

<h2>用户名：{{ userFullName }}</h2>

<script>
import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
export default {
  computed: {
    // 1.对象写法
    // ...mapGetters({
    //   fullName: 'userFullName'
    // })
    
    // 2.数组写法
    ...mapGetters(['userFullName'])
  }
}

6、总结

• 因为 mapXxxx 函数返回的是一个 对象，因此使用扩展运算符 ... 将其展开并放入对应的 computed 或 methods 中
• 因为 mapActions 和 mapMutations 生成的函数 接收一个参数，用于指定操作哪个数据，因此，必须在 @click 的事件中传入参数
• mapXxxx 这四个函数 用法基本一致，理解其中一个融会贯通即可