[[403055]]

本文轉(zhuǎn)載自微信公眾號(hào)「新鈦云服」，作者林泓輝。轉(zhuǎn)載本文請(qǐng)聯(lián)系新鈦云服公眾號(hào)。

一、Vuex是干什么用的?

Vuex是用于對(duì)復(fù)雜應(yīng)用進(jìn)行狀態(tài)管理用的(官方說法是它是一種狀態(tài)管理模式)。

“殺雞不用宰牛刀”。對(duì)于簡單的項(xiàng)目，根本用不著Vuex這把“宰牛刀”。那簡單的項(xiàng)目用什么呢?用Vue.js官方提供的“事件總線”就可以了。

二、我們import進(jìn)來的Vuex對(duì)象都包含些什么呢?

我們使用Vuex的時(shí)候怎么用呢?通常都是這樣：

import Vue from 'vue'; 
import Vuex from 'vuex'; 
 
Vue.use(Vuex); 
 
new Vuex.Store({ 
state: {     //放置state的值 
  count: 0, 
  str:"abcd234" 
  }, 
getters: {   //放置getters方法 
    strLen: state => state.str.length 
}, 
// mutations只能是同步操作 
mutations: {   //放置mutations方法 
      increment(state, payload) { 
         //在這里改變state中的數(shù)據(jù) 
         state.count = payload.number; 
      } 
}, 
// actions可以是異步操作 
actions: {      //放置actions方法 
      actionName({ commit }) { 
        //dosomething 
        commit('mutationName') 
      }, 
      getSong ({commit}, id) { 
        api.getMusicUrlResource(id).then(res => { 
          let url = res.data.data[0].url; 
        }) 
        .catch((error) => {  // 錯(cuò)誤處理 
            console.log(error); 
        }); 
    } 
} 
}); 
 
new Vue({ 
 el: '#app', 
 store, 
 ... 
}); 

這里import進(jìn)來的Vuex是個(gè)什么東西呢?我們用console.log把它輸出一下：

console.log(Vuex) 

通過輸出，我們發(fā)現(xiàn)其結(jié)構(gòu)如下：

可見，import進(jìn)來的Vuex它實(shí)際上是一個(gè)對(duì)象，里面包含了Store這一構(gòu)造函數(shù)，還有幾個(gè)mapActions、mapGetters、mapMutations、mapState這幾個(gè)輔助方法(后面再講)。

除此之外，還有一個(gè)install方法。我們發(fā)現(xiàn)，import之后要對(duì)其進(jìn)行Vue.use(Vuex)的操作。根據(jù)這兩個(gè)線索，我們就明白了，Vuex本質(zhì)上就是一個(gè)Vue.js的插件。

三、創(chuàng)建好的store實(shí)例怎么在各個(gè)組件中都能引用到?

Vuex 通過 store 選項(xiàng)，提供了一種機(jī)制將狀態(tài)從根組件“注入”到每一個(gè)子組件中(需調(diào)用 Vue.use(Vuex))：

const app = new Vue({ 
 el: '#app', 
 // 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件 
 store, 
 components: { Counter }, 
 template: ` 
   <div class="app"> 
     <counter></counter> 
   </div> 
 ` 
}) 

通過在根實(shí)例中注冊(cè) store 選項(xiàng)，該 store實(shí)例會(huì)注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。

四、Vuex中的幾大核心概念

1. State

這個(gè)很好理解，就是狀態(tài)數(shù)據(jù)。Vuex所管理的就是狀態(tài)，其它的如Actions、Mutations都是來輔助實(shí)現(xiàn)對(duì)狀態(tài)的管理的。Vue組件要有所變化，也是直接受到State的驅(qū)動(dòng)來變化的。

可以通過this.$store.state來直接獲取狀態(tài)，也可以利用vuex提供的mapState輔助函數(shù)將state映射到計(jì)算屬性computed中去。

2. Getters

Getters本質(zhì)上是用來對(duì)狀態(tài)進(jìn)行加工處理。Getters與State的關(guān)系，就像Vue.js的computed與data的關(guān)系。 getter的返回值會(huì)根據(jù)它的依賴被緩存起來，且只有當(dāng)它的依賴值發(fā)生了改變才會(huì)被重新計(jì)算。

可以通過this.$store.getters.valueName對(duì)派生出來的狀態(tài)進(jìn)行訪問?；蛘咧苯邮褂幂o助函數(shù)mapGetters將其映射到本地計(jì)算屬性中去。

3. Mutations

更改 Vuex的 store中的狀態(tài)的唯一方法是提交 mutation。Vuex中的 mutation非常類似于事件：每個(gè) mutation都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方。

你不能直接調(diào)用一個(gè) mutation handler。這個(gè)選項(xiàng)更像是事件注冊(cè)：“當(dāng)觸發(fā)一個(gè)類型為 increment 的 mutation時(shí)，調(diào)用此函數(shù)。”要喚醒一個(gè)mutation handler，你需要以相應(yīng)的 type 調(diào)用store.commit方法，并且它會(huì)接受 state 作為第一個(gè)參數(shù)，也可以向 store.commit 傳入額外的參數(shù)，即 mutation 的 載荷(payload)：

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

// ... 
mutations: { 
 increment (state, n) { 
   state.count += n 
} 
} 
store.commit('increment', 10) 

在大多數(shù)情況下，載荷應(yīng)該是一個(gè)對(duì)象，這樣可以包含多個(gè)字段并且記錄的 mutation 會(huì)更易讀：

// ... 
mutations: { 
 increment (state, payload) { 
   state.count += payload.amount 
} 
} 
store.commit('increment', { 
 amount: 10 
}) 
// ***或者以對(duì)象風(fēng)格提交*** 
mutations: { 
 increment (state, payload) { 
   state.count += payload.amount 
} 
} 
store.commit({ 
 type: 'increment', 
 amount: 10 
}) 

Mutation需遵守 Vue的響應(yīng)規(guī)則

既然 Vuex的 store中的狀態(tài)是響應(yīng)式的，那么當(dāng)我們變更狀態(tài)時(shí)，監(jiān)視狀態(tài)的 Vue組件也會(huì)自動(dòng)更新。這也意味著 Vuex中的 mutation也需要與使用 Vue一樣遵守一些注意事項(xiàng)：

• 最好提前在你的 store中初始化好所有所需屬性。
• 當(dāng)需要在對(duì)象上添加新屬性時(shí)，你應(yīng)該:
• 使用 Vue.set(obj, 'newProp', 123), 或者
• 以新對(duì)象替換老對(duì)象。例如，利用對(duì)象展開運(yùn)算符 我們可以這樣寫：

state.obj = { ...state.obj, newProp: 123 } 

Mutation必須是同步函數(shù)

一條重要的原則就是要記住 mutation必須是同步函數(shù)。為什么?請(qǐng)參考下面的例子：

mutations: { 
 someMutation (state) { 
   api.callAsyncMethod(() => { 
     state.count++ 
  }) 
} 
} 

現(xiàn)在想象，我們正在 debug一個(gè) app并且觀察 devtool中的 mutation日志。每一條 mutation被記錄，devtools都需要捕捉到前一狀態(tài)和后一狀態(tài)的快照。然而，在上面的例子中 mutation中的異步函數(shù)中的回調(diào)讓這不可能完成：因?yàn)楫?dāng) mutation觸發(fā)的時(shí)候，回調(diào)函數(shù)還沒有被調(diào)用，devtools不知道什么時(shí)候回調(diào)函數(shù)實(shí)際上被調(diào)用——實(shí)質(zhì)上任何在回調(diào)函數(shù)中進(jìn)行的狀態(tài)的改變都是不可追蹤的。

在組件中提交 Mutation

除了這種使用 this.$store.commit('xxx') 提交 mutation的方式之外，還有一種方式，即使用 mapMutations 輔助函數(shù)將組件中的 methods映射為 this.$store.commit。例如：

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')` 
  }) 
} 
} 

經(jīng)過這樣的映射之后，就可以通過調(diào)用方法的方式來觸發(fā)其對(duì)應(yīng)的(所映射到的)mutation commit了，比如，上例中調(diào)用add()方法，就相當(dāng)于執(zhí)行了this.$store.commit('increment')了。

4. Actions

Action類似于 mutation，不同在于：

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

Action函數(shù)接受一個(gè)與 store實(shí)例具有相同方法和屬性的 context對(duì)象，因此你可以調(diào)用 context.commit 提交一個(gè) mutation，或者通過 context.state 和 context.getters 來獲取 state和 getters。

分發(fā) Action

Action 通過 store.dispatch 方法觸發(fā)：

store.dispatch('increment') 

Actions 支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)：

// 以載荷形式分發(fā) 
store.dispatch('incrementAsync', { 
 amount: 10 
}) 
 
// 以對(duì)象形式分發(fā) 
store.dispatch({ 
 type: 'incrementAsync', 
 amount: 10 
}) 

另外，你需要知道， this.$store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 this.$store.dispatch 仍舊返回 Promise。

actions: { 
 actionA ({ commit }) { 
   return new Promise((resolve, reject) => { 
     setTimeout(() => { 
       commit('someMutation') 
       resolve() 
    }, 1000) 
  }) 
} 
} 
 
store.dispatch('actionA').then(() => { 
 // ... 
}) 

5. Module

Module是什么概念呢?它實(shí)際上是對(duì)于store的一種切割。由于Vuex使用的是單一狀態(tài)樹，這樣整個(gè)應(yīng)用的所有狀態(tài)都會(huì)集中到一個(gè)比較大的對(duì)象上面，那么，當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store對(duì)象就很可能變得相當(dāng)臃腫!Vuex允許我們將 store分割成一個(gè)個(gè)的模塊(module)。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割。

(1)模塊的局部狀態(tài)

對(duì)于每個(gè)模塊內(nèi)部的 mutation 和 getter，接收的第一個(gè)參數(shù)就是模塊的局部狀態(tài)對(duì)象，對(duì)于模塊內(nèi)部的 getter，根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來。同樣，對(duì)于模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點(diǎn)狀態(tài)則為 context.rootState：

const moduleA = { 
 state: () => ({ 
   count: 0 
}), 
 mutations: { 
   increment (state) { 
     // 這里的 `state` 對(duì)象是模塊的局部狀態(tài) 
     state.count++ 
  } 
}, 
 
 getters: { 
   doubleCount (state) { 
     return state.count * 2 
  }, 
   sumWithRootCount (state, getters, rootState) { 
     return state.count + rootState.count 
  } 
}, 
 
 actions: { 
   incrementIfOddOnRootSum ({ state, commit, rootState }) { 
     if ((state.count + rootState.count) % 2 === 1) { 
       commit('increment') 
    } 
  } 
} 
} 

(2)命名空間

默認(rèn)情況下，模塊內(nèi)部的 action、mutation和 getter是注冊(cè)在全局命名空間的——這樣使得多個(gè)模塊能夠?qū)ν?mutation或 action作出響應(yīng)。

如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當(dāng)模塊被注冊(cè)后，它的所有 getter、action及 mutation都會(huì)自動(dòng)根據(jù)模塊注冊(cè)的路徑調(diào)整命名。例如：

const store = new Vuex.Store({ 
 modules: { 
   account: { 
     namespaced: true, 
 
     // 模塊內(nèi)容（module assets） 
     state: { ... }, // 模塊內(nèi)的狀態(tài)已經(jīng)是嵌套的了，使用 `namespaced` 屬性不會(huì)對(duì)其產(chǎn)生影響 
     getters: { 
       isAdmin () { ... } // -> getters['account/isAdmin'] 
    }, 
     actions: { 
       login () { ... } // -> dispatch('account/login') 
    }, 
     mutations: { 
       login () { ... } // -> commit('account/login') 
    }, 
 
     // 嵌套模塊 
     modules: { 
       // 繼承父模塊的命名空間 
       myPage: { 
         state: { ... }, 
         getters: { 
           profile () { ... } // -> getters['account/profile'] 
        } 
      }, 
 
       // 進(jìn)一步嵌套命名空間 
       posts: { 
         namespaced: true, 
 
         state: { ... }, 
         getters: { 
           popular () { ... } // -> getters['account/posts/popular'] 
        } 
      } 
    } 
  } 
} 
}) 

啟用了命名空間的 getter 和 action 會(huì)收到局部化的 getter，dispatch 和 commit。換言之，你在使用模塊內(nèi)容(module assets)時(shí)不需要在同一模塊內(nèi)額外添加空間名前綴。更改 namespaced 屬性后不需要修改模塊內(nèi)的代碼。

(3)在帶命名空間的模塊內(nèi)訪問全局內(nèi)容(Global Assets)

如果你希望使用全局 state和 getter，rootState 和 rootGetters 會(huì)作為第三和第四參數(shù)傳入 getter，也會(huì)通過 context 對(duì)象的屬性傳入 action。

若需要在全局命名空間內(nèi)分發(fā) action或提交 mutation，將 { root: true } 作為第三參數(shù)傳給 dispatch 或 commit 即可。

modules: { 
 foo: { 
   namespaced: true, 
 
   getters: { 
     // 在這個(gè)模塊的 getter 中，`getters` 被局部化了 
     // 你可以使用 getter 的第四個(gè)參數(shù)來調(diào)用 `rootGetters` 
     someGetter (state, getters, rootState, rootGetters) { 
       getters.someOtherGetter // -> 'foo/someOtherGetter' 
       rootGetters.someOtherGetter // -> 'someOtherGetter' 
    }, 
     someOtherGetter: state => { ... } 
  }, 
 
   actions: { 
     // 在這個(gè)模塊中， dispatch 和 commit 也被局部化了 
     // 他們可以接受 `root` 屬性以訪問根 dispatch 或 commit 
     someAction ({ dispatch, commit, getters, rootGetters }) { 
       getters.someGetter // -> 'foo/someGetter' 
       rootGetters.someGetter // -> 'someGetter' 
 
       dispatch('someOtherAction') // -> 'foo/someOtherAction' 
       dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction' 
 
       commit('someMutation') // -> 'foo/someMutation' 
       commit('someMutation', null, { root: true }) // -> 'someMutation' 
    }, 
     someOtherAction (ctx, payload) { ... } 
  } 
} 
} 

(4)在帶命名空間的模塊注冊(cè)全局 action

若需要在帶命名空間的模塊注冊(cè)全局 action，你可添加 root: true，并將這個(gè) action 的定義放在函數(shù) handler 中。例如：

{ 
 actions: { 
   someOtherAction ({dispatch}) { 
     dispatch('someAction') 
  } 
}, 
 modules: { 
   foo: { 
     namespaced: true, 
 
     actions: { 
       someAction: { 
         root: true, 
         handler (namespacedContext, payload) { ... } // -> 'someAction' 
      } 
    } 
  } 
} 
} 

(5)帶命名空間綁定函數(shù)

當(dāng)使用 mapState, mapGetters, mapActions 和 mapMutations 這些函數(shù)來綁定帶命名空間的模塊時(shí)，寫起來可能比較繁瑣：

computed: { 
 ...mapState({ 
   a: state => state.some.nested.module.a, 
   b: state => state.some.nested.module.b 
}) 
}, 
methods: { 
 ...mapActions([ 
   'some/nested/module/foo', // -> this['some/nested/module/foo']() 
   'some/nested/module/bar' // -> this['some/nested/module/bar']() 
]) 
} 

對(duì)于這種情況，你可以將模塊的空間名稱字符串作為第一個(gè)參數(shù)傳遞給上述函數(shù)，這樣所有綁定都會(huì)自動(dòng)將該模塊作為上下文。于是上面的例子可以簡化為：

computed: { 
 ...mapState('some/nested/module', { 
   a: state => state.a, 
   b: state => state.b 
}) 
}, 
methods: { 
 ...mapActions('some/nested/module', [ 
   'foo', // -> this.foo() 
   'bar' // -> this.bar() 
]) 
} 

(6)模塊動(dòng)態(tài)注冊(cè)

在 store創(chuàng)建之后，你可以使用 store.registerModule 方法注冊(cè)模塊：

import Vuex from 'vuex' 
 
const store = new Vuex.Store({ /* 選項(xiàng) */ }) 
 
// 注冊(cè)模塊 `myModule` 
store.registerModule('myModule', { 
 // ... 
}) 
// 注冊(cè)嵌套模塊 `nested/myModule` 
store.registerModule(['nested', 'myModule'], { 
 // ... 
}) 

之后就可以通過 store.state.myModule 和 store.state.nested.myModule 訪問模塊的狀態(tài)。

模塊動(dòng)態(tài)注冊(cè)功能使得其他 Vue 插件可以通過在 store 中附加新模塊的方式來使用 Vuex 管理狀態(tài)。例如，vuex-router-sync插件就是通過動(dòng)態(tài)注冊(cè)模塊將vue-router 和 vuex結(jié)合在一起，實(shí)現(xiàn)應(yīng)用的路由狀態(tài)管理。

你也可以使用 store.unregisterModule(moduleName) 來動(dòng)態(tài)卸載模塊。注意，你不能使用此方法卸載靜態(tài)模塊(即創(chuàng)建 store時(shí)聲明的模塊)。

注意，你可以通過 store.hasModule(moduleName) 方法檢查該模塊是否已經(jīng)被注冊(cè)到 store。

保留 state

在注冊(cè)一個(gè)新 module時(shí)，你很有可能想保留過去的 state，例如從一個(gè)服務(wù)端渲染的應(yīng)用保留 state。你可以通過 preserveState 選項(xiàng)將其歸檔：store.registerModule('a', module, { preserveState: true })。

當(dāng)你設(shè)置 preserveState: true 時(shí)，該模塊會(huì)被注冊(cè)，action、mutation和 getter會(huì)被添加到 store中，但是 state不會(huì)。這里假設(shè) store的 state已經(jīng)包含了這個(gè) module的 state并且你不希望將其覆寫。

(7)模塊重用

有時(shí)我們可能需要?jiǎng)?chuàng)建一個(gè)模塊的多個(gè)實(shí)例，例如：

• 創(chuàng)建多個(gè) store，他們共用同一個(gè)模塊 (例如當(dāng) runInNewContext 選項(xiàng)是 false 或 'once' 時(shí)，為了在服務(wù)端渲染中避免有狀態(tài)的單例 (opens new window))
• 在一個(gè) store中多次注冊(cè)同一個(gè)模塊

如果我們使用一個(gè)純對(duì)象來聲明模塊的狀態(tài)，那么這個(gè)狀態(tài)對(duì)象會(huì)通過引用被共享，導(dǎo)致狀態(tài)對(duì)象被修改時(shí) store 或模塊間數(shù)據(jù)互相污染的問題。

實(shí)際上這和 Vue組件內(nèi)的 data 是同樣的問題。因此解決辦法也是相同的——使用一個(gè)函數(shù)來聲明模塊狀態(tài)(僅 2.3.0+ 支持)：

const MyReusableModule = { 
 state: () => ({ 
   foo: 'bar' 
}), 
 // mutation, action 和 getter 等等... 
} 

五、Vuex中的表單處理

當(dāng)在嚴(yán)格模式中使用 Vuex時(shí)，在屬于 Vuex的 state上使用 v-model 會(huì)比較棘手：

<input v-model="obj.message"> 

假設(shè)這里的 obj 是在計(jì)算屬性中返回的一個(gè)屬于 Vuex store 的對(duì)象，在用戶輸入時(shí)，v-model 會(huì)試圖直接修改 obj.message。在嚴(yán)格模式中，由于這個(gè)修改不是在 mutation 函數(shù)中執(zhí)行的, 這里會(huì)拋出一個(gè)錯(cuò)誤。

用“Vuex 的思維”去解決這個(gè)問題的方法是：給 <input> 中綁定 value，然后偵聽 input 或者 change 事件，在事件回調(diào)中調(diào)用一個(gè)方法:

<input :value="message" @input="updateMessage"> 
computed: { 
 ...mapState({ 
   message: state => state.obj.message 
}) 
}, 
methods: { 
 updateMessage (e) { 
   this.$store.commit('updateMessage', e.target.value) 
} 
} 

下面是 mutation函數(shù)：

// ... 
mutations: { 
 updateMessage (state, message) { 
   state.obj.message = message 
} 
} 

必須承認(rèn)，這樣做比簡單地使用“v-model + 局部狀態(tài)”要啰嗦得多，并且也損失了一些 v-model 中很有用的特性。另一個(gè)方法是使用帶有 setter 的雙向綁定計(jì)算屬性：

<input v-model="message"> 
computed: { 
 message: { 
   get () { 
     return this.$store.state.obj.message 
  }, 
   set (value) { 
     this.$store.commit('updateMessage', value) 
  } 
} 
}