上一篇:关于v-model和Vuex结合
- 当项目不断扩大时使用Vuex的地方越来越多,store文件越来臃肿,我们需要对Vuex来解耦
- 我在搭新项目的架子时对Vuex用了模块化(modules)来管理整个项目希望能给大家一些灵感
- 关于Vuex的用法我就不班门弄斧啦
先看一下整体结构,对于图片我会一一解释的大家不要着急哈~
- 解释下上面的demo
- index
- Cart 购物车模块
- Cart模块里有两个函数:
- addCart(修改state)
- receiveAddCart(这里我是调用了全局模块里的方法来判断是否可以修改state)
- 另外要注意在模块内去调用其他模块的方法是要指定第三个参数
{ root: true }
- Cart模块里有两个函数:
- User 用户模块(这个例子里没有用到)
- Root 公共模块 放了一些公共的方法和state之类的
- receiveAddcart函数请求后台来判断是否可以更改,这些方法使用几率很高所以我放在了全局模块
- index
- 下面讲如何在组件内使用Vuex
- 在分模块是我分了三个模块(User, Root, Cart)
- 需要用到哪个模块使用createNamespacedHelpers()引入就可以啦,最后引入我们的辅助函数就可以啦
- 其实从createNamespacedHelpers里派生出的辅助函数就已经代表了我们的具体模块
- 上面图片红框的地方说明在哪里引入辅助函数并且如何调用函数