vuex：弄懂mapState、mapGetters、mapMutations、mapActions
2023-05-01 09:12:28
在 Vuex 中，mapState、mapGetters、mapMutations 和 mapActions 的作用和用法如下：
1. mapState 作用：将 Vuex store 中的 state 属性自动映射到组件的 computed 属性中。 用法：在组件中，通过 mapState 函数引入需要的 state 属性，然后在 computed 属性中使用展开运算符将其映射。
2. mapGetters 作用：将 Vuex store 中的 getters 属性自动映射到组件的 computed 属性中。 用法：类似于 mapState，通过 mapGetters 函数引入需要的 getters 属性，并在 computed 属性中使用展开运算符进行映射。getters 可以接收参数，用于进一步处理和计算数据。
3. mapMutations 作用：将 Vuex store 中的 mutations 方法映射到组件的 methods 中，以便在组件中通过调用这些方法直接修改 state。 用法：通过 mapMutations 函数引入需要的 mutations 方法，并在 methods 中使用展开运算符进行映射。调用这些方法时，可以使用 this[methodName] 的形式，其中 methodName 是 mutations 方法的名称，args 是传递给 mutations 方法的参数。
4. mapActions 作用：将 Vuex store 中的 actions 方法映射到组件的 methods 中，以便在组件中通过调用这些方法执行异步操作。 用法：类似于 mapMutations，通过 mapActions 函数引入需要的 actions 方法，并在 methods 中使用展开运算符进行映射。调用这些方法时，同样可以使用 this[methodName] 的形式。actions 方法内部通常会调用 mutations 方法来更新 state。
总结： mapState 和 mapGetters 用于从 store 中获取数据，并将其映射到组件的 computed 属性中。 mapMutations 和 mapActions 用于在组件中调用 store 中的方法，以修改 state 或执行异步操作。 掌握这些辅助函数的用法，可以大大提高 Vuex 状态管理的代码可读性和可维护性。
热门标签
