解耦Vuex,使用模块化(modules)来搭建你的项目

1,212 阅读2分钟

上一篇:关于v-model和Vuex结合

- 当项目不断扩大时使用Vuex的地方越来越多,store文件越来臃肿,我们需要对Vuex来解耦

- 我在搭新项目的架子时对Vuex用了模块化(modules)来管理整个项目希望能给大家一些灵感

- 关于Vuex的用法我就不班门弄斧啦

先看一下整体结构,对于图片我会一一解释的大家不要着急哈~

store

  • 解释下上面的demo
    • index
    • Cart 购物车模块
      • Cart模块里有两个函数:
        • addCart(修改state)
        • receiveAddCart(这里我是调用了全局模块里的方法来判断是否可以修改state)
        • 另外要注意在模块内去调用其他模块的方法是要指定第三个参数 { root: true }
    • User 用户模块(这个例子里没有用到)
    • Root 公共模块 放了一些公共的方法和state之类的
      • receiveAddcart函数请求后台来判断是否可以更改,这些方法使用几率很高所以我放在了全局模块

- 下面讲如何在组件内使用Vuex

  • 在分模块是我分了三个模块(User, Root, Cart)
  • 需要用到哪个模块使用createNamespacedHelpers()引入就可以啦,最后引入我们的辅助函数就可以啦
  • 其实从createNamespacedHelpers里派生出的辅助函数就已经代表了我们的具体模块
  • 上面图片红框的地方说明在哪里引入辅助函数并且如何调用函数

以上就是全部内容啦,其实我课件做的很多但是不知道该如何写出来。有哪些不懂可以评论

其实我在敲代码时可能忘了如何把自己的知识表达出来,我希望能写一些自己的坑和小经验分享给大家来锻炼自己。

demo我传到github上啦