@
zhghaha 你开发大点的纯 vue 不行的,通信会蛋痛。然后 vue 2.0 升级后,去除了周边的支持,都以 plugins 的方式支持,然后 vuex 添加完整了该有的东西: states, actions, mutations, getters ,其实在 vue 1.x 的时候我记得挺简单的,因为那时候 vuex 的声明是放入 new Vue 实例声明的属性中的。然后 vue 2.0 的时候,由于 getter 的概念与 computed 的概念冲突,所以取消了数据 state 的双向 observe ,然后现在的流程就变成了下面的样子:
1. 需要再 vuex 的 store 部分声明以下四个东西:
- state 初始化数据
- actions 执行的动作,这里对应 dispatch 异步模型
- mutations 突变的动作,这里对应 commit 同步模型
- getters 数据操作的方法,其实就是对应 ng2 Services 的大部分功能
2. 在 state 的同步上,需要引入声明的 getters 才能对数据进行映射 view 层
3. vuex 对外主要有两个钩子:
- mapGetter => 返回 getters 的方法,用于 computed
- mapActions => 执行方法的行为描述
之前由于直接绑定给 actions 到当前 Vue 实例 this 上,所以出现重名的情况,这里依然避免不了。
接下来就是要执行操作,有两种方式:
- methods: { ...mapActions([]) } => 这里蛋痛的是又要重新声明一次 action type
- this.$store.dispatch or this.$store.commit => 这是本来的入口
然后上面的东西其实显得累赘和多余,对于 redux + redux-thunk 的用法, React 的用法其实更加简单
1. state 初始化数据,这个肯定需要的
2. actions 这里只是需要声明到 actions 文件
3. mutations 其实这个就没多大必要的了,你 action 过去,同步和异步都是可见的声明代码
4. getters 其实尤小右也说了,就是 function ,然后这里提取了概念,其实在 redux 中的 reduce 本身就是 function , function 之间的调用其实已经不足以是一个概念,并且如果你不注意,由于 vue 的计算属性,你需要声明到计算属性中,其实这就相当于 React 的 setState 方法,当时从声明和代码本身来说, React 的更加直接暴力,直接在组件声明一次即可。
最后 map 其实这里 React 你只需要在 Containers 容器中进行操作,样板代码。最后顺势 props 的传递过程, vue 那边有 v-bind 和普通的方式,所以其实对于 dump 类的组件,对于外部更新的接口是好声明的,并不需要 bind 的概念。
由于这次升级,其实 vue 1.x 之前的简单优势并不明显,如果你是对视图层依赖,不引入过多, React 其实更加简单,可调试性更强,每一个环节都是入口声明,然后走 function 这个流程,直接 debugger ,对于 vue computed 那层其实对于调试已经是黑盒,如果 getters 那里你声明掉了,你会发现不报错,并且不知道从哪里调试入手。
好吧,我最后只是来安利一下 React~还有就是表示 vue 2.0 早已不是简单当初宣传的 vue 1.x 形态。对于中小型项目选择来讲意义并不大,工程化的解决方案至少都应该是中大型项目,比如以前网页很简答的时候,也没人说需要 MVC(Backbone) 之类的东西, jQuery 足以,都是代码量上去了,长期迭代,才会想用一些手段来做优化和迭代平稳的事情。
综上: vue 2.0 基本上最终是 React 。就像尤小右说过,需求的雷同,导致框架趋同,所以学 React 吧,方向是一直对的。