vuex：mapState、mapGetters、mapMutations、mapActions
2022-01-22 21:35:07
在应用 Vuex 的过程中，我们首先需要在 state 中定义变量，类似于 Vue 中的 data 属性，用于存放应用的状态。通过 $store 可以轻松获取这些状态。然而，如果需要访问 Vuex 中的多个数据，手动编写代码会显得冗长。这时，我们可以利用 computed 属性简化代码结构。通常，Props、methods、data 和 computed 的初始化在 beforeCreated 和 created 生命周期钩子之间进行。
为了进一步优化代码，引入了 mapState 辅助函数。通过使用 mapState，我们可以将多个 state 属性轻松地映射到计算属性中，简化了代码的编写。需要注意的是，mapState 方法前的属性名需与获取的 state 属性名保持一致。
接着，我们介绍 getters，其功能类似于 Vue 中的计算属性，通过 getters 来进一步处理状态，得到所需值。一个关键特性是，getters 允许传入参数，其中第一个参数始终是 state。这使得 getters 在处理复杂逻辑时更加灵活。
在 Vuex 的上下文中，mutations 的使用类似于 Vue 中的 methods。它们用于执行状态更改，通常通过 commit 方法来调用。每个 mutation 可以接受多个参数，其中第一个参数是 state，第二个参数是 载荷（payLoad），即额外的参数。在 template 部分，你可以直接调用 mutations 方法，通常在 js 部分，推荐将参数写为对象形式，以便传递更多信息。
为了应对需要操作多个数据的场景，引入了 mapMutations 方法，它类似于 mapState 和 mapGetters，用于将多个 mutations 映射到函数中。通过使用 mapMutations，我们可以简化代码，避免编写冗余的 mutations 调用。在调用 mapMutations 方法时，可以指定参数，以进一步优化操作流程。
热门标签
