一，前言
上一篇，主要介绍了 Vuex 插件机制的实现，主要涉及以下几个点：
本篇，继续介绍 Vuex 辅助函数的实现；
二，辅助函数的介绍
1，辅助函数的作用
继续以之前的代码作为示例：
<template> <div id="app"> <br> 根模块测试： <br> 商品数量: {{this.$store.state.num}} 个<br> 商品单价: 10 元<br> 订单金额: {{this.$store.getters.getPrice}} 元<br> <button @click="$store.commit('changeNum',5)">同步更新：数量+5</button> <button @click="$store.dispatch('changeNum',-5)">异步更新：数量-5</button>
<br> 子模块测试： <br> A 模块-商品数量: {{this.$store.state.moduleA.num}} 个<br> B 模块-商品数量: {{this.$store.state.moduleB.num}} 个<br> C 模块-商品数量: {{this.$store.state.moduleA.moduleC.num}} 个<br> <button @click="$store.commit('moduleA/changeNum',5)">A 模块-同步更新：数量+5</button> <button @click="$store.commit('moduleB/changeNum',5)">B 模块-同步更新：数量+5</button> <button @click="$store.commit('moduleA/moduleC/changeNum',5)">C 模块-同步更新：数量+5</button> </div></template>
复制代码
可以发现，在项目使用 Vuex 插件中 State、getter、mutation、action 时，需要通过类似 this.$store.state.num 这样一长串才可以实现，当模块层级较深就会变得更长；这种不太优雅的写法，也会影响到代码的可读性及后续运维；
所以，Vuex 插件提供了一系列辅助函数，用于简化和解决上边的问题；
2，辅助函数功能介绍
Vuex 提供了以下辅助函数：
mapState：在组件的 computed 中使用；
mapGetters：在组件的 computed 中使用；
mapMutations：在组件的 methods 中使用；
mapActios：在组件的 methods 中使用；
createNamespacedHelpers：获取指定命名空间下的辅助函数；
三，Vuex 辅助函数的使用
1，辅助函数的使用示例
使用官网 Vuex 插件提供的辅助函数对示例进行优化：
<template> <div id="app"> <br> 根模块测试： <br> 商品数量: {{num}} 个<br> 商品单价: 10 元<br> 订单金额: {{getPrice}} 元<br> </div></template>
<script>import { mapState, mapGetters, mapMutations, mapActions } from "vuex";export default { mounted() { console.log("store", this.$store); }, computed: { ...mapState(["num"]), ...mapGetters(["getPrice"]) }, methods: { }};</script>
复制代码
四，Vuex 辅助函数的实现
1，辅助函数逻辑分析
辅助函数 mapState、mapActions、mapMutations，通过将 vuex.store 中的属性映射到 vm 实例上，从而实现通过 vm 实例可以直接访问到 vuex.store 中的属性，简化 Vuex 操作；
2，mapState 实现
export function mapState(stateArr) { let obj = {}; for (let i = 0; i < stateArr.length; i++) { let stateName = stateArr[i]; obj[stateName] = function() { return this.$store.state[stateName] } } return obj}
复制代码
五，结尾
本篇，主要介绍了 Vuex 辅助函数的实现，主要涉及以下几个点：
Vuex 辅助函数作用；
Vuex 辅助函数使用介绍；
Vuex 辅助函数逻辑分析与实现；
至此，《Vuex 源码学习笔记》专栏完结，后续将会继续完善扩充；
明天开始下一个源码专栏~
评论