Vuex架构设计
来源:互联网 发布:淘宝男士休闲鞋 编辑:程序博客网 时间:2024/06/14 06:27
记录最近学到的应该怎样去设计Vuex
首先代码都放在src下的store目录
store下有六个js文件:
1.index.js:入口文件,
其中debug是线下false,线上true。
然后strict是是否开启严格模式,开启时会检测对state的修改是不是通过mutations来修改的,如果不是则会报错。
最后plugins是Vuex的插件,而createLogger是Vuex的内置的打印日志插件,在state修改后会打印各种日志,比如修改前的state是什么修改后的是什么等等。。。
2.state.js:定义、管理所有的数据状态,就是存放数据的地方
3.getters.js:获取state下的数据,state的映射
4.mutations.js:对state进行修改的地方
这里我只对state进行简单的修改操作而已,不管是同步还是异步的逻辑我都写在actions里,然后再commit给mutaions就可以了
5.mutations-types.js:所有mutation相关的名字都在mutation-types
这样书写方便以及lint工具能帮我们检测这样写对不对
6.actions.js就是对数据进行各种操作的地方啦,这里就不多说了。
然后在组件内调用getters,mutations,actions是可以通过Vuex提供的语法糖,也就是辅助函数来调用。
这里mapGetters和mapMutations、mapActions一定要分别在computed,methods里用扩展运算符的方式调用辅助函数。
然后就可以在当前实例下通过this.singer获取state中singer的数据,相当于data里面有个singer。
然后setSinger,selectPlay相当于在methods里有这两个方法,可以直接通过this.setSinger()和this.selectPlay()对数据进行修改和处理。
学习笔记,如有不足请多指教!
- Vuex架构设计
- vue-cli结合vuex架构目录
- vuex
- vuex
- vuex
- Vuex
- vuex
- vuex
- vuex
- vuex
- vuex
- Vuex
- Vuex
- vuex
- vuex
- vuex
- vuex
- Web App 分层架构(基于 Vue+Router+Vuex)
- 视觉测量为什么要考虑畸变
- Python3.x与Pyhon2.x的区别
- Eval()日期时间格式化
- 面临大鱼号新政策如何开通收益
- Kotlin总结2
- Vuex架构设计
- sql server2008 活动监视器
- Elasticsearch 5.6.1版本体验
- postgres赋予角色登录权限
- Android Volley架构分析
- 交叉表实现PIVOT方式
- 无法覆盖bootstrap的样式
- mysql 主从复制原理
- RAR和ZIP:压缩大战真相