Vue笔记四：vuex和vue-router全家桶

除了在组件式方面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: '
User
'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

路由可以针对组件User分配id，js端也可以获取路由的参数。

const User = {
  template: '
User {{ $route.params.id }}
'
}

关于懒加载

懒加载的功能并非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级别。

转载，请表明出处。总目录前段收集器

微信公众号