Vuex簡(jiǎn)介：

由于使用propes傳遞數(shù)據(jù)太麻煩，所以使用vuex進(jìn)行狀態(tài)管理。
不能直接修改vuex中的數(shù)據(jù)，只能調(diào)用方法修改數(shù)據(jù)數(shù)據(jù)。
vuex的核心：store（倉庫）
vuex是響應(yīng)式的

核心四個(gè)點(diǎn)：

• state

在項(xiàng)目中引入store
在computed中調(diào)用state數(shù)據(jù)：

    conputed：{
        count（）{
            return store.state.count
        }
    }

在methods中調(diào)用方法mutations方法：

    methods：{
        increment（）{
            store.commit('increment')
        }
    }

mapState

當(dāng)一個(gè)組件需要多個(gè)狀態(tài)時(shí)，幫助生產(chǎn)計(jì)算屬性得到state中的數(shù)據(jù)。
當(dāng)映射的計(jì)算屬性的名稱與state的子節(jié)點(diǎn)名稱相同時(shí)，可以直接傳遞一個(gè)字符串?dāng)?shù)組。

    computed：mapState(['count','color']}

這樣一來，count就是state中的count，color就是state中的color

對(duì)象展開運(yùn)算符，當(dāng)computed中還有其他屬性時(shí)，可以使用對(duì)象展開運(yùn)算符將mapState返回的對(duì)象合并到computed中。

• getter

從store中的state中派生出一些狀態(tài)，如doneTodosCount，
當(dāng)多個(gè)組件都需要用到這個(gè)方法（屬性）時(shí)，可以將其放入store里的getters中，使其成為getters的一個(gè)計(jì)算屬性

    const store = new Vuex.Store({
        state: {
                todos: [
                    { id: 1, text: '...', done: true },
                    { id: 2, text: '...', done: false }
                ]
        },
        getters: {
                doneTodos: state => {
                    return state.todos.filter(todo => todo.done)
                }
        }
    })

此時(shí)可以使用store.getters.doneTodos 來獲取數(shù)據(jù)。
getters也可以接受其他getters作為參數(shù)。
mapGetters輔助函數(shù)，和mapState類似，如果想要將getter屬性另取一個(gè)名字，使用對(duì)象形式：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對(duì)象展開運(yùn)算符將 getter 混入 computed 對(duì)象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
//另取名字，使用對(duì)象形式
mapGetters({
  // 映射 `this.doneCount` 為 `store.getters.doneTodosCount`
  doneCount: 'doneTodosCount'
})

• mutation

非常類似于事件，每一個(gè)都有字符串的事件類型（type）和一個(gè)回掉函數(shù)（handler），這個(gè)回掉函數(shù)就是實(shí)際進(jìn)行狀態(tài)更改的地方，并且會(huì)接受state作為第一個(gè)參數(shù)。
如state例子中的mutation，
在調(diào)用mutation時(shí)，不可以直接調(diào)用handler（回掉函數(shù)）只能通過commit方法傳入事件類型的字符串進(jìn)行mutation的調(diào)用。

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 變更狀態(tài)
      state.count++
    }
  }
})

store.commit('increment')

提交載荷（payload）
commit可以接受額外的參數(shù)，多數(shù)情況下，載荷是個(gè)對(duì)象，其代碼風(fēng)格如下：

store.commit({
  type: 'increment',
  amount: 10
})

在大型項(xiàng)目中，通常將mutation作為常量寫入另一個(gè)文件中

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'
// store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store = new Vuex.Store({
  state: { ... },
  mutations: {
    // 我們可以使用 ES2015 風(fēng)格的計(jì)算屬性命名功能來使用一個(gè)常量作為函數(shù)名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }
})

mutation必須是同步函數(shù)，沒有什么異步請(qǐng)求
組件中提交mutation，mapMutation

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`

      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
    })
  }
}

與mapGtter類似。

mutation類似于vue實(shí)例中的methods，但是調(diào)用方法不同。
getters類似于vue實(shí)例中的computed。

• Action

類似于mutation，不同在于：

• action提交的是mutation，而不是直接改變狀態(tài)
• action可以包含任意異步操作

action函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對(duì)象，使用context.commit提交一個(gè)mutation
或者使用context.state \ context.getters來獲取state和getters。
context不是store實(shí)例本身。

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

-###Module
當(dāng)一個(gè)應(yīng)用十分復(fù)雜時(shí)，將所有狀態(tài)放在一個(gè)單一狀態(tài)樹時(shí)會(huì)使得store變得十分臃腫，所以可以使用module進(jìn)行分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

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

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

每個(gè)模塊的第一個(gè)參數(shù)是其自身的state。