Vue經驗總結

題記：前段時間時隔8個月從新拾起了vue，vue的太（yi）好（jing）用（wang）了（wan）。

1、Vuex初體驗

之前用慣了react的dva而後忽然切換到vue的vuex真的有點不習慣。

一、Store

這個是vuex中的大哥大，什麼都歸它管（state、mutations、getter、action、module），你能夠把它理解爲一個倉庫（官方文檔也是這麼說的）

// 建立stroe
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

二、State

每一個Stroe中都會有這麼一個狀態樹、對於vue來講他是全局的，對於store來講他是惟一的，咱們能夠把它理解爲倉庫中的貨物，當客戶（vue）中想要取出倉庫（store）中的貨物（state），很簡單this.$stroe.state.test

三、Mutation

mutation 必須是同步函數
更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。這個咱們能夠把它比喻爲一個訂單（Mutation），當客戶（vue）須要改變倉庫（store）中的貨物（state）時，咱們就能夠經過這個方法去改變，可是這個方法在本地是不能被直接調用的，你須要以相應的 type 調用 store.commit 方法：

// 無參數提交
store.commit('increment')
// 有參數
store.commit('increment', {
  amount: 10
})
// OR
store.commit({
  type: 'increment',
  amount: 10
})

其實這一點和dva有點類似

四、Action

這個和Mutation和類似，可是：

1. Action 提交的是 mutation，而不是直接變動狀態。
2. Action 能夠包含任意異步操做。

並且actions是與Mutation的觸發方法也不一樣，它是用的store.dispatch(確認過眼神)，並且它能夠調用actions，講道理它是比mutation高一個等級的。

至於剩下的Getter、Module目前好像尚未怎麼用到，就下次用了體驗了事後再說吧。

2、Vuex中的輔助函數

在vuex中全部的輔助函數都只有一個目的，方便你我他

一、mapState

當咱們須要在一個頁面中獲取store中的多個狀態時，怎麼辦

// bad
this.$store.state.a
this.$store.state.b
this.$store.state.c
// good
computed:{
    ...mapState({
        a:state=>state.a,
        b:state=>state.b,
        c:state=>state.c
    })
}

可是這個地方有一個坑，若是a是一個對象

a:{
    d:1,
    e:{
        f:2
    }
}
computed:{
    ...mapState({
        f:state=>state.a.e.f
    })
}

這樣是不行的，具體爲何我也不是很清楚，求大佬講解

未完待續...