## 一、概述 為了方便在組件中使用，可以把vuex中定義的那些state、mutation、action及getters在組件里面做映射。這樣，就可以大大簡化了對狀態組件的使用了； >[danger] 簡單的理解，就是通過映射，把vuex中定義的那些元素，映射到組件的定義中來，直接通過映射的方法名就可以使用了，而不用再通過詳細的代碼過程來調用； ## 二、state與mapState 當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用mapState輔助函數幫助我們生成計算屬性； 舉例來說： ```js const Counter = { template: `<div>{{ count }}</div>`, computed: { count () { return this.$store.state.count } } } ``` 當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給mapState傳一個字符串數組。 ``` computed: mapState([ // 映射 this.count 為 store.state.count 'count' ]) ``` mapState函數返回的是一個對象。我們如何將它與局部計算屬性混合使用呢？通常，我們需要使用一個工具函數將多個對象合并為一個，以使我們可以將最終對象傳給computed屬性。 ``` computed: { localComputed () { /* ... */ }, // 使用對象展開運算符將此對象混入到外部對象中 ...mapState({ // ... }) } ``` ## 三、getter與mapGetters 有時候我們需要從 store 中的 state 中派生出一些狀態，例如對列表進行過濾并計數： ``` computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length } } ``` Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。 Getter 接受 state 作為其第一個參數： ``` 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) } } }) ``` Getter 會暴露為`store.getters`對象： ``` store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }] ``` Getter 也可以接受其他 getter 作為第二個參數： ``` getters: { // ... doneTodosCount: (state, getters) => { return getters.doneTodos.length } } store.getters.doneTodosCount // -> 1 ``` ### 組件中使用： 我們可以很容易地在任何組件中使用它： ``` computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } } ``` mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性； ``` import { mapGetters } from 'vuex' export default { // ... computed: { // 使用對象展開運算符將 getter 混入 computed 對象中 ...mapGetters([ 'doneTodosCount', 'anotherGetter', // ... ]) } } ``` 如果你想將一個 getter 屬性另取一個名字，使用對象形式： ``` mapGetters({ // 映射 `this.doneCount` 為 `store.getters.doneTodosCount` doneCount: 'doneTodosCount' }) ``` ## 四、mutation和mapMutations 更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的**事件類型 (type)**和 一個**回調函數 (handler)**。這個回調函數就是我們實際進行狀態更改的地方，并且它會接受 state 作為第一個參數： ``` const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 變更狀態 state.count++ } } }) ``` ``` store.commit('increment') ``` 當使用對象風格的提交方式，整個對象都作為載荷傳給 mutation 函數，因此 handler 保持不變； ``` mutations: { increment (state, payload) { state.count += payload.amount } } ``` 使用常量替代 Mutation 事件類型， ``` // 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 風格的計算屬性命名功能來使用一個常量作為函數名 [SOME_MUTATION] (state) { // mutate state } } }) ``` ### 組件中使用： 你可以在組件中使用 this.$store.commit('xxx') 提交 mutation。 或者使用 mapMutations 輔助函數將組件中的 methods 映射為 store.commit 調用（需要在根節點注入 store）。 ``` 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')` }) } } ``` ## 五、action與mapActions Action 類似于 mutation，不同在于： Action 提交的是 mutation，而不是直接變更狀態； Action 可以包含任意異步操作； Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用`context.commit`提交一個 mutation，或者通過`context.state`和`context.getters`來獲取 state 和 getters。 ``` actions: { increment ({ commit }) { commit('increment') } } ``` 分發： Action 通過`store.dispatch`方法觸發： ``` store.dispatch('increment') ``` 乍一眼看上去感覺多此一舉，我們直接分發 mutation 豈不更方便？實際上并非如此，還記得**mutation 必須同步執行**這個限制么？Action 就不受約束！我們可以在 action 內部執行**異步**操作： ``` actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } ``` Actions 支持同樣的載荷方式和對象方式進行分發： ``` // 以載荷形式分發 store.dispatch('incrementAsync', { amount: 10 }) // 以對象形式分發 store.dispatch({ type: 'incrementAsync', amount: 10 }) ``` ### 組件中使用： 你在組件中使用`this.$store.dispatch('xxx')`分發 action，或者使用`mapActions`輔助函數將組件的 methods 映射為`store.dispatch`調用（需要先在根節點注入`store`）： ``` 用法： // 引入?mapActions import { mapActions } from 'vuex'； // 進行解構賦值和拓展運算 export default { // ... methods: { //下述中的 ... 是拓展運算符 // 使用 [] 是解構賦值 ...mapActions([ 'increment', // 將 `this.increment()` 映射為 `this.$store.dispatch('increment')` // `mapActions` 也支持載荷： 'incrementBy' // 將 `this.incrementBy(amount)` 映射為 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')` }) } } ``` 注意： 1. mapActions?必須放在?methods中，因為?action?或者? mutation?都是函數. 2. mapAction?里面都是store?里面的集合，所以使用ES6中解構賦值的方法進行獲取我們所需的方法。 3. mapAction?前面的 ( ...?)?是ES6中?拓展運算符，對我們所需的方法從數組中拓展出來。 4. ES6對象中同名屬性可以簡寫。 5. 也可以自己命名不同函數名來映射?action方法 ## 六、createNamespacedHelpers `createNamespacedHelpers(namespace: string): Object` 創建基于命名空間的組件綁定輔助函數。其返回一個包含`mapState`、`mapGetters`、`mapActions`和`mapMutations`的對象。它們都已經綁定在了給定的命名空間上。 ## 七、實例 ```vue <template> //直接使用state的代碼 {{this.$store.state.views}} //mapState方式 {{viewsCount}} </template> ``` ```js <script> import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' export default { data () { return { checked: true }}, created () { // this.$store.dispatch('addViews') // 直接通過store的方法 觸發action, 改變 views 的值 this.blogAdd() // 通過mapActions 觸發mutation 從而commit ，改變state的值 }, computed: { ...mapState({ viewsCount: 'views' }), ...mapGetters({ todosALise: 'getToDo' // getToDo 不是字符串，對應的是getter里面的一個方法名字 然后將這個方法名字重新取一個別名 todosALise })}, methods: { ...mapMutations({ totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定義的一個別名方法，本組件直接調用這個方法 }), ...mapActions({ blogAdd: 'blogAdd' // 第一個blogAdd是定義的一個函數別名稱，掛載在到this(vue)實例上，后面一個blogAdd 才是actions里面函數方法名稱 })} } </script> ```