这篇文章介绍了在Vue.js的Vuex状态管理库中，如何使用mapState、mapGetters、mapMutations和mapActions来简化组件与store的交互。mapState帮助我们创建计算属性以访问state，而mapGetters用于获取getter方法。mapMutations则生成方法直接提交mutations，mapActions则生成方法调用actions。
1 mapState()
(1)在index.js中配置state数据
(2)使用mapState方法读取state数据
借助mapState生成计算属性，从state中读取数据(对象写法)
...mapState({ sum: "sum", subject: "subject", school: "school" }),
借助mapState生成计算属性，从state中读取数据(数组写法)
...mapState(["sum", "subject", "school"]),
2 mapGetters
(1)在index.js中配置state数据
(2)使用mapState方法读取state数据
借助mapGetters生成计算属性，从Getter中读取数据(对象写法)
...mapGetters({ sum: "sum", subject: "subject", school: "school" }),
借助mapGetters生成计算属性，从Getter中读取数据(数组写法)
...mapGetters(["sum", "subject", "school"]),
3 mapMutations
借助mapMutations生成对应的方法，方法中会调用comit去联系mutations(对象写法)
...mapMutations({ increment: "jia", decrement: "jian" }),
4 mapActions
借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
...mapActions({incrementOdd: "incrementOdd", incrementWait: "incrementWait", }),
扫一扫
209
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
