vuex學習筆記

什麼是vuex?
vuex是一個專門爲vue.js設計的集中式狀態管理架構，關於狀態的理解就是在data中的屬性須要共享給其餘vue組件使用的部分。
vuex組成:state(存放的數據狀態）、getters(對state中的狀態進行過濾處理)、mutations（寫有修改數據的邏輯）、actions（提交的是mutation，而不是直接變動狀態)。

如下是各個模塊的具體介紹：

state
vuex提供一個倉庫，state用來存放數據源，對應於通常vue對象裏面的data(還有對應於actions和mutations對應於methods)。

響應式存儲：state裏面存放的數據是響應式的，vue組件從store中讀取數據，如果store中的數據發生改變，依賴這個數據的組件也會發生更新。

局部狀態：（1）獲取：在vue組件中獲取數據最直接的方式是經過計算屬性中獲取。（2)組件仍然能夠保存局部狀態：能夠把state放在組件自身，做爲局部數據，專供此組件使用。

mapState(不是很懂??)
mapState的做用是把全局的state和getters映射到當前組件的computed計算屬性中，this.$store.state。
使用方法：

import {mapState} from 'vuex'
export default{
  computer:
  mapState({
   count:state=>state.count,
     'count' //映射this.count爲store.state.count
   })
}

getters
在store倉庫中，state用來存放數據，若是要對數據進行處理輸出，能夠寫到計算屬性中，當不少組件都須要使用處理後的數據，咱們就能夠把數據抽離出來共享，這就是getters存在的意義。
使用方法：在store中定義getters,第一個參數是state

const getter={style:state=>state.style}

使用方法：

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

mutation
vuex中store數據改變的惟一方法是mutation。通俗的理解就是mutations裏面裝着一些改變數據方法的集合，把處理數據邏輯方法放在mutations裏面，使得數據和視圖分離。
使用方法：
mutations結構：每一個mutation都有一個字符串類型的事件類型(type)和回調函數(handler),首先註冊事件，當觸發響應類型的時候調用handler()，調用type的時候須要用到store.commit()方法。

const store=new Vuex.Store({
   state:{
     count:1
     },
   mutations:{
      increment(state){
         state.count++}
    }
  })

store.commit('increment')//調用type，觸發handler(state)

commit:提交能夠在組件中使用this.$store.commit('xxx')提交mutation。

action
action提交的是mutation，而不是直接變動狀態；action能夠包含任意異步操做。它能夠理解爲經過將mutations裏面處理數據的方法變成可異步的處理數據的方法，但仍是經過mutation來操做。
使用：定義actions

const store=new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment(state){
       state.count++;
    }
 },
 actions:{
   increment(context){
     context.commit('increment')
   }
 }
})

module
module可讓每個模塊擁有本身的state、mutation、action、getters，使得結構很是清晰，方便管理。
怎麼用module?

const moduleA={
  state:{...},
  mutations:{...},
  actions:{...},
}
const moduleB={
  state:{...},
  mutations:{...},
  actions:{...}
}
const store=new Vuex.Store({
   modules:{
     a:moduleA,
     b:moduleB
   }
})

關於命名空間：若是想要模塊具備更高的封裝度和複用性，能夠經過添加namespaced:true的方式使其成爲帶命名空間的模塊。