Vue.js核心技术解析与uni-app跨平台实战开发学习笔记 第10章 Vuex状态管理 10.5 Vuex代码分离 10.6 辅助函数
Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
文章目录
- Vue.js核心技术解析与uni-app跨平台实战开发学习笔记
- 第10章 Vuex状态管理
- 10.5 Vuex代码分离
- 10.6 辅助函数
- 10.6.1 mapState辅助函数
- 10.6.2 mapGetters辅助函数
- 10.6.3 mapMutations辅助函数
- 10.6.4 mapActions辅助函数
第10章 Vuex状态管理
Vuex相当于一个数据仓库，所有组件都可以到仓库中存取数据。
10.5 Vuex代码分离
随着功能增加，state、getters、mutations、actions中的代码会越来越多，为了方便后期管理，可以进行代码分离。
在store文件夹下新建state.js
index.js
同样，state属性和state值相同了，根据es6语法，可以简写成state。
getters、mutations、actions的分离方式与state相同。
10.6 辅助函数
作用：在组件中调用Vuex的数据或方法，使其更加便捷。
辅助函数一共4个：mapState、mapGetters、mapMutations、mapActions
10.6.1 mapState辅助函数
作用：处理state中的数据。
state中的数据
运行效果
10.6.2 mapGetters辅助函数
作用：将store中的getters映射到组件计算属性中，从而在组件中更加便捷地使用getters对象中的属性。
举个栗子
state中的getters：
10.6.3 mapMutations辅助函数
作用：把store中mutation内的方法映射到组件的methods属性中，从而可以直接在组件中使用mutations中的方法。
举个栗子
store中的mutations
HelloWorld组件中
运行效果
10.6.4 mapActions辅助函数
作用：把store中actions内的方法映射到组件methods属性中，从而直接在组件中使用actions中的方法。
举个栗子
