Vue中vuex的应用(二)

简介: Vue中vuex的应用(二)

vuex模块化


  • 为什么需要模块化?
  • 团队协作开发需要
  • 方便后期维护管理
  • 怎么模块化?
  • 将除modules对象中的内容按照指定的拆分标准进行按文件分离
  • 在index.js中导入并在modules对象中注册

有什么需要注意的?

  • 因为模块化,后续的语法需要有所调整,具体见下
  • 命名冲突时会执行自动合并策略
  • state,名字相同也不会冲突
  • mutations、actioms里同名方法会被合并成数组,都执行(index.js中的是最先执行的)
  • getters如果同名,无法合并,直接报错
  • 通过命名空间来避免冲突(给每个模块开启命名空间)
  • 设置模块的namespaced属性为true即可


vuex模块化后的语法:


  • 获取state数据

  • 对象属性:this.$store.state.模块名.属性名
  • 辅助函数:mapState
  • 作用:将指定的state中的数据映射为组件自身的计算属性
  • 语法:
  • 写在computed中
  • …mapState(模块名,[属性名1,属性名2,…])


  • 同步修改数据

  • 对象属性:this.$store.commit(**模块名/**方法名,载荷数据)
  • 辅助函数:mapMutations
  • 作用:将指定的mutations中的方法映射为组件自身的方法
  • 语法:
  • 写在methods中
  • …mapMutations(模块名,[方法名1,方法名2,…])


  • 异步修改数据

  • 对象属性:this.$store.dispatch(**模块名/**方法名,载荷数据)
  • 辅助函数:mapActions
  • 作用:将指定的Actions中的方法映射为组件自身的方法
  • 语法:
  • 写在methods中
  • …mapActions(模块名,[方法名1,方法名2,…])

  • 获取修饰数据

  • 对象属性:this.$store.getters[“**模块名/**属性名”]
  • 辅助函数:mapGetters
  • 作用:将指定的getters中的数据映射为组件自身的计算属性
  • 语法:
  • 写在computed中
  • …mapGetters(模块名,[属性名1,属性名2,…])
目录
打赏
0
0
0
0
1
分享
相关文章
|
18天前
|
vue使用iconfont图标
vue使用iconfont图标
103 1
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
53 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
30 8
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
VUE 和 VUEX 中的数据流
本文讲的是VUE 和 VUEX 中的数据流,看起来在 Vue 里面困扰开发者的事情之一是如何在组件之间共享状态。对于刚刚接触响应式编程的开发者来说,像Vuex这种库,有着繁多的新名词及其关注点分离的方式,往往令人望而生畏。
2189 0
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
55 1
vue学习第一章
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等