关于Vuex的命令空间,俗点来说就是模块化
- 首先我们先回忆下我们vuex的五大核心:
state:vuex的状态数据管理仓库,
mutations:用于操作state中的数据或许是某种状态
actions:用于执行异步操作,调用mutations中的方法,去改变state中的数据或者状态
getters:vuex中的计算属性,用法于computed计算属性基本一致,不过他是用来计算state中的某 种数据或状态;
module:模块化
当我们实战开发企业级项目的时候,我们有成千上百个页面的时候,总不能把所有的数据或者状态和方法全部写在一个Vuex中吧,即使可以的情况下,我们大家想一下,我们的维修成本呢?比如客户又要添加一个新的页面或者对这个项目中间有几点是不满意的呢?我们总不能一个个去找把,即使找得到,我们更改过某个事件会引起其他事件的牵动,所以我们需要用到modules 用来隔离开来每个页面和事件都在每个模块中,这样是不是方便我们去寻找需要改的页面中的方法,改A的A就是A的,即使有bug也不会牵动别的页面的事件!并且也大大减少了我们后期的维修成本!
-
话不多说直接上图
首先:我们定义一下我们需要的模块并且集合到一个js文件中! -
接着我们把集合的子模块引入到主要的父模块中,并用扩展运算符来扩展开!
-
然后接着我们把集合的子模块通过namespaced来开启隔离模式,也就是所说的命令空间!
-
接下来开始实际操作,自我感觉最好用的两种获取模块中数据的方法,
-
我们可以通过$store.state.模块名.数据 直接获取模块中的数据
-
我们也可以通过进入辅助函数,
-
续上面所说,我们肯定还有获取模块中的事件方法!
-
我们需要通过引入辅助函数来获取:mapMutations
- 以上操作是不是就拿到了模块中的方法,当然有人会说我模块中的两个事件名都一样了,这咋整啊!那我们肯定是要去解决问题对吧!
解决方法如下: