Vue 模块化 命令空间

关于Vuex的命令空间,俗点来说就是模块化

  • 首先我们先回忆下我们vuex的五大核心
    state:vuex的状态数据管理仓库,
    mutations:用于操作state中的数据或许是某种状态
    actions:用于执行异步操作,调用mutations中的方法,去改变state中的数据或者状态
    getters:vuex中的计算属性,用法于computed计算属性基本一致,不过他是用来计算state中的某 种数据或状态;
    module:模块化
当我们实战开发企业级项目的时候,我们有成千上百个页面的时候,总不能把所有的数据或者状态和方法全部写在一个Vuex中吧,即使可以的情况下,我们大家想一下,我们的维修成本呢?比如客户又要添加一个新的页面或者对这个项目中间有几点是不满意的呢?我们总不能一个个去找把,即使找得到,我们更改过某个事件会引起其他事件的牵动,所以我们需要用到modules 用来隔离开来每个页面和事件都在每个模块中,这样是不是方便我们去寻找需要改的页面中的方法,改A的A就是A的,即使有bug也不会牵动别的页面的事件!并且也大大减少了我们后期的维修成本!
  1. 话不多说直接上图
    首先:我们定义一下我们需要的模块并且集合到一个js文件中!

    在这里插入图片描述

  2. 接着我们把集合的子模块引入到主要的父模块中,并用扩展运算符来扩展开!

  3. 然后接着我们把集合的子模块通过namespaced来开启隔离模式,也就是所说的命令空间!
    在这里插入图片描述

  4. 接下来开始实际操作,自我感觉最好用的两种获取模块中数据的方法,

  5. 我们可以通过$store.state.模块名.数据 直接获取模块中的数据在这里插入图片描述

  6. 我们也可以通过进入辅助函数,

  7. 续上面所说,我们肯定还有获取模块中的事件方法!

  8. 我们需要通过引入辅助函数来获取:mapMutations
    在这里插入图片描述
    在这里插入图片描述

  • 以上操作是不是就拿到了模块中的方法,当然有人会说我模块中的两个事件名都一样了,这咋整啊!那我们肯定是要去解决问题对吧!
    解决方法如下:

在这里插入图片描述

已完结

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值