除了在组件式方面vue和react有异曲同工之妙之外，vuex和redux也非常像，vue进入2.0版本，还得到了两个好听的名字“渐进式框架”和“自底向上增量开发的设计”，参考详情。
其实，我在学习vue之前，学习了react。但是react有很多内容相对还是复杂。JSX是非常JS的思路，但是html和js混写总是非常奇怪，需要很长时间去习惯。redux应该是react的一个附属品，也是必学的。但是它相对复杂，学习成本较高。但是我学习了vuex后，去理解redux变的相对简单。这可能就是vue的“渐进式”设计。
| 框架 | React | Vue |
|---|---|---|
| 路由 | react-router | vue-router |
| 数据 | redux | vuex |
vuex
要学习好vuex，必须掌握关键词：state，getters，actions，mutations，store。详情参考官方教程，不再赘述。
state为状态的参数。
getters为获取器，用于过滤的方法获取参数。
mutations是改变状态参数的函数，但是不能直接被调用，需要对应的
store.commit（可以额外传参数）。actions不是直接修改状态，而是基于mutations，可以执行异步处理
store更像一个容器，装着以上的所有函数和参数，最后需要注入到Vue的实例当中。
2.0 特性--辅助函数
辅助函数j就是可用可不用。如果你用了，它就会提高代码编写效率的。
- mapState
- mapGetter
- mapMutation
举个例子，如果不用辅助函数mapState，
computed: {
count () {
return this.$store.state.count
}
}
使用辅助函数mapState，
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
如果不用辅助函数mapGetter，
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
}
使用辅助函数mapGetter，
computed: {
// 使用对象展开运算符将 getters 混入 computed 对象中
...mapGetters([
'doneTodosCount',
'anotherGetter',
])
}
如果不用辅助函数mapMutation，
methods: {
increment(){
this.$store.commit('increment')
},
}
使用辅助函数mapMutation，
methods: {
...mapMutations([
'increment',
]),
}
如果不用辅助函数mapActions，
methods: {
increment(){
this.$store.dispatch('increment')
},
}
使用辅助函数mapActions，
methods: {
... mapActions([
'increment',
]),
}
vue-rounter
vue-router的出现不是个意外，也不是让你将所有的路由都装在vue-router。它更多是用于SPA，把一些动态的内容提取出来。例如动态路由。详情请参考官网
const User = {
template: '<div>User</div>'
}
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
})
路由可以针对组件User分配id，js端也可以获取路由的参数。
const User = {
template: '<div>User {{ $route.params.id }}</div>'
}
关于懒加载
懒加载的功能并非vue特有，而是webpack特有的，有几种特殊的写法。
const Foo = resolve => {
// require.ensure 是 Webpack 的特殊语法，用来设置 code-split point
// （代码分块）
require.ensure(['./Foo.vue'], () => {
resolve(require('./Foo.vue'))
})
}
也可以简写为
const Foo = resolve => require(['./Foo.vue'], resolve)
懒加载会独立分包，把对应的组件独立打包。而懒加载组件的css将不会进行提取。但是会对route-view级别的css进行打包，因此建议将共有的css放在route-view级别。
转载，请表明出处。总目录前段收集器
