做网站建设的公司有哪些,网页设计免费模板参考网页,广州公司注册无地址,如何做免费网络推广文章目录 四大核心复习一、获取模块内的state数据1.目标#xff1a;2.使用模块中的数据3.代码示例 二、获取模块内的getters数据1.目标#xff1a;2.语法#xff1a;3.代码演示 三、获取模块内的mutations方法1.目标#xff1a;2.注意#xff1a;3.调用方式#xff1a;4.… 文章目录 四大核心复习一、获取模块内的state数据1.目标2.使用模块中的数据3.代码示例 二、获取模块内的getters数据1.目标2.语法3.代码演示 三、获取模块内的mutations方法1.目标2.注意3.调用方式4.代码实现 四、获取模块内的actions方法1.目标2.注意3.调用语法4.代码实现 五、vuex模块化小结1.直接使用2.借助辅助方法使用 四大核心复习 在学习我们的 module 模块之前先对前面的四个核心概念进行一个复习 一、获取模块内的state数据 1.目标 掌握模块中 state 的访问语法 尽管已经分模块了但其实子模块的状态还是会挂到根级别的 state 中属性名就是模块名 2.使用模块中的数据 直接通过模块名访问 $store.state.模块名.xxx通过 mapState 映射 默认根级别的映射 mapState([ ‘xxx’ ])子模块的映射 mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间 namespaced:true modules/user.js const state {userInfo: {name: zs,age: 18},myMsg: 我的数据 }const mutations {updateMsg (state, msg) {state.myMsg msg} }const actions {}const getters {}export default {namespaced: true,state,mutations,actions,getters }3.代码示例 1、$store直接访问 $store.state.user.userInfo.name2、mapState辅助函数访问 开启命名空间 ...mapState(user, [userInfo]), ...mapState(setting, [theme, desc]),二、获取模块内的getters数据 1.目标 掌握模块中 getters 的访问语 2.语法 使用模块中 getters 中的数据 直接通过模块名访问 $store.getters[模块名/xxx ]通过 mapGetters 映射 默认根级别的映射 mapGetters([ xxx ]) 子模块的映射 mapGetters(模块名, [xxx]) - 需要开启命名空间 3.代码演示 modules/user.js const getters {// 分模块后state指代子模块的stateUpperCaseName (state) {return state.userInfo.name.toUpperCase()} }Son1.vue 直接访问getters !-- 测试访问模块中的getters - 原生 -- div{{ $store.getters[user/UpperCaseName] }}/divSon2.vue 通过命名空间访问 computed:{...mapGetters(user, [UpperCaseName]) }三、获取模块内的mutations方法 1.目标 掌握模块中 mutation 的调用语法 2.注意 默认模块中的 mutation 和 actions 会被挂载到全局需要开启命名空间才会挂载到子模块。 3.调用方式 直接通过 store 调用 $store.commit(模块名/xxx , 额外参数)通过 mapMutations 映射 默认根级别的映射 mapMutations([ ‘xxx’ ])子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间 4.代码实现 modules/user.js const mutations {setUser (state, newUserInfo) {state.userInfo newUserInfo} }modules/setting.js const mutations {setTheme (state, newTheme) {state.theme newTheme} }Son1.vue button clickupdateUser更新个人信息/button button clickupdateTheme更新主题色/buttonexport default {methods: {updateUser () {// $store.commit(模块名/mutation名, 额外传参)this.$store.commit(user/setUser, {name: xiaowang,age: 25})}, updateTheme () {this.$store.commit(setting/setTheme, pink)}} }Son2.vue button clicksetUser({ name: xiaoli, age: 80 })更新个人信息/button button clicksetTheme(skyblue)更新主题/buttonmethods:{ // 分模块的映射 ...mapMutations(setting, [setTheme]), ...mapMutations(user, [setUser]), }四、获取模块内的actions方法 1.目标 掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可) 2.注意 默认模块中的 mutation 和 actions 会被挂载到全局需要开启命名空间才会挂载到子模块。 3.调用语法 直接通过 store 调用 $store.dispatch(模块名/xxx , 额外参数)通过 mapActions 映射 默认根级别的映射 mapActions([ ‘xxx’ ])子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间 4.代码实现 需求 modules/user.js const actions {setUserSecond (context, newUserInfo) {// 将异步在action中进行封装setTimeout(() {// 调用mutation context上下文默认提交的就是自己模块的action和mutationcontext.commit(setUser, newUserInfo)}, 1000)} }Son1.vue 直接通过store调用 button clickupdateUser2一秒后更新信息/buttonmethods:{updateUser2 () {// 调用action dispatchthis.$store.dispatch(user/setUserSecond, {name: xiaohong,age: 28})}, }Son2.vue mapActions映射 button clicksetUserSecond({ name: xiaoli, age: 80 })一秒后更新信息/buttonmethods:{...mapActions(user, [setUserSecond]) }五、vuex模块化小结 1.直接使用 state -- $store.state.模块名.数据项名getters -- $store.getters[‘模块名/属性名’]mutations -- $store.commit(‘模块名/方法名’, 其他参数)actions -- $store.dispatch(‘模块名/方法名’, 其他参数) 2.借助辅助方法使用 1.import { mapXxxx, mapXxx } from ‘vuex’ computed、methods: { ​ // …mapState、…mapGetters放computed中 ​ // …mapMutations、…mapActions放methods中 ​ …mapXxxx(‘模块名’, [‘数据项|方法’]), ​ …mapXxxx(‘模块名’, { 新的名字: 原来的名字 }), } 2.组件中直接使用 属性 {{ age }} 或 方法 clickupdateAge(2)