除了在組件式方面vue和react有異曲同工之妙之外，vuex和redux也非常像，vue進(jìn)入2.0版本，還得到了兩個(gè)好聽(tīng)的名字“漸進(jìn)式框架”和“自底向上增量開(kāi)發(fā)的設(shè)計(jì)”，參考詳情。

其實(shí)，我在學(xué)習(xí)vue之前，學(xué)習(xí)了react。但是react有很多內(nèi)容相對(duì)還是復(fù)雜。JSX是非常JS的思路，但是html和js混寫總是非常奇怪，需要很長(zhǎng)時(shí)間去習(xí)慣。redux應(yīng)該是react的一個(gè)附屬品，也是必學(xué)的。但是它相對(duì)復(fù)雜，學(xué)習(xí)成本較高。但是我學(xué)習(xí)了vuex后，去理解redux變的相對(duì)簡(jiǎn)單。這可能就是vue的“漸進(jìn)式”設(shè)計(jì)。

vuex

要學(xué)習(xí)好vuex，必須掌握關(guān)鍵詞：state，getters，actions，mutations，store。詳情參考官方教程，不再贅述。

• state為狀態(tài)的參數(shù)。

• getters為獲取器，用于過(guò)濾的方法獲取參數(shù)。

• mutations是改變狀態(tài)參數(shù)的函數(shù)，但是不能直接被調(diào)用，需要對(duì)應(yīng)的store.commit（可以額外傳參數(shù)）。

• actions不是直接修改狀態(tài)，而是基于mutations，可以執(zhí)行異步處理

• store更像一個(gè)容器，裝著以上的所有函數(shù)和參數(shù)，最后需要注入到Vue的實(shí)例當(dāng)中。

2.0 特性--輔助函數(shù)

輔助函數(shù)j就是可用可不用。如果你用了，它就會(huì)提高代碼編寫效率的。

• mapState
• mapGetter
• mapMutation

舉個(gè)例子，如果不用輔助函數(shù)mapState，

computed: {
    count () {
      return this.$store.state.count
    }
  }

使用輔助函數(shù)mapState，

computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

如果不用輔助函數(shù)mapGetter，

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

使用輔助函數(shù)mapGetter，

computed: {
  // 使用對(duì)象展開(kāi)運(yùn)算符將 getters 混入 computed 對(duì)象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
    ])
  }

如果不用輔助函數(shù)mapMutation，

  methods: {
    increment(){
        this.$store.commit('increment')
    },
}

使用輔助函數(shù)mapMutation，

methods: {
    ...mapMutations([
      'increment',
     ]),
}

如果不用輔助函數(shù)mapActions，

  methods: {
    increment(){
        this.$store.dispatch('increment')
    },
}

使用輔助函數(shù)mapActions，

methods: {
    ... mapActions([
      'increment',
     ]),
}

vue-rounter

vue-router的出現(xiàn)不是個(gè)意外，也不是讓你將所有的路由都裝在vue-router。它更多是用于SPA，把一些動(dòng)態(tài)的內(nèi)容提取出來(lái)。例如動(dòng)態(tài)路由。詳情請(qǐng)參考官網(wǎng)

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 動(dòng)態(tài)路徑參數(shù) 以冒號(hào)開(kāi)頭
    { path: '/user/:id', component: User }
  ]
})

路由可以針對(duì)組件User分配id，js端也可以獲取路由的參數(shù)。

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

關(guān)于懶加載

懶加載的功能并非vue特有，而是webpack特有的，有幾種特殊的寫法。

const Foo = resolve => {
  // require.ensure 是 Webpack 的特殊語(yǔ)法，用來(lái)設(shè)置 code-split point
  // （代碼分塊）
  require.ensure(['./Foo.vue'], () => {
    resolve(require('./Foo.vue'))
  })
}

也可以簡(jiǎn)寫為

const Foo = resolve => require(['./Foo.vue'], resolve)

懶加載會(huì)獨(dú)立分包，把對(duì)應(yīng)的組件獨(dú)立打包。而懶加載組件的css將不會(huì)進(jìn)行提取。但是會(huì)對(duì)route-view級(jí)別的css進(jìn)行打包，因此建議將共有的css放在route-view級(jí)別。

轉(zhuǎn)載，請(qǐng)表明出處。總目錄前段收集器