vue是當(dāng)今比較火的一種框架，在很多方面都會(huì)用到Vue,今天帶大家簡(jiǎn)單了解一下vue中一款常用的插件VueX

首先Vuex 是什么？

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具?devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。

Vuex中基本的對(duì)象

state，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；

view，以聲明方式將?state?映射到視圖；

mutations：提交狀態(tài)修改。也就是set、get中的set，唯一修改state的方式 ，不支持異步操作 。

actions，響應(yīng)在?view?上的用戶輸入導(dǎo)致的狀態(tài)變化。State 單一狀態(tài)樹

mapState 輔助函數(shù)

對(duì)象展開運(yùn)算符

Getter 計(jì)算

通過屬性訪問

Getter 會(huì)暴露為 store.getters 對(duì)象，你可以以屬性的形式訪問這些值：

store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]

Getter 也可以接受其他 getter 作為第二個(gè)參數(shù)：

getters:{// ...doneTodosCount:(state,getters)=>{returngetters.doneTodos.length}}store.getters.doneTodosCount// -> 1

使用：

computed:{doneTodosCount(){returnthis.$store.getters.doneTodosCount}}

通過方法訪問

getters:{// ...getTodoById:(state)=>(id)=>{returnstate.todos.find(todo=>todo.id===id)}}store.getters.getTodoById(2)// -> { id: 2, text: '...', done: false }

mapGetters 輔助函數(shù)

mapGetters 輔助函數(shù)僅僅是將 store 中的 getter 映射到局部計(jì)算屬性

Mutation 更改 Vuex 的方法

每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)

提交載荷（Payload）

你可以向 store.commit 傳入額外的參數(shù)，即 mutation 的 載荷（payload）：

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

對(duì)象風(fēng)格的提交方式

提交 mutation 的另一種方式是直接使用包含 type 屬性的對(duì)象

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

當(dāng)使用對(duì)象風(fēng)格的提交方式，整個(gè)對(duì)象都作為載荷傳給 mutation 函數(shù)，因此 handler 保持不變

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

遵守一些注意事項(xiàng)：

1.最好提前在你的 store 中初始化好所有所需屬性。

2.當(dāng)需要在對(duì)象上添加新屬性時(shí)，你應(yīng)該

(1).使用 Vue.set(obj, 'newProp', 123), 或者

(2).以新對(duì)象替換老對(duì)象。

使用常量替代 Mutation 事件類型

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

一條重要的原則就是要記住 mutation 必須是同步函數(shù)

在組件中提交 Mutation

使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數(shù)將組件中的 methods 映射為 store.commit 調(diào)用（需要在根節(jié)點(diǎn)注入 store)

Action

action 類似于 mutation，不同在于：

1.Action 提交的是 mutation，而不是直接變更狀態(tài)。

2.Action 可以包含任意異步操作.

分發(fā) Action

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

store.dispatch('increment')

在組件中分發(fā) Action

使用 this.$store.dispatch('xxx') 分發(fā) action，或者使用 mapActions 輔助函數(shù)將組件的 methods 映射為 store.dispatch 調(diào)用（需要先在根節(jié)點(diǎn)注入 store）

組合 Action

store.dispatch 可以處理被觸發(fā)的 action 的處理函數(shù)返回的 Promise，并且 store.dispatch 仍舊返回 Promise

Module 模塊

每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

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

對(duì)于模塊內(nèi)部的 mutation 和 getter，接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對(duì)象。

const moduleA={state:{count:0},mutations:{increment(state){// 這里的 `state` 對(duì)象是模塊的局部狀態(tài)state.count++}},getters:{doubleCount(state){returnstate.count*2}}}

模塊內(nèi)部的 action，局部狀態(tài)通過 context.state 暴露出來，根節(jié)點(diǎn)狀態(tài)則為 context.rootState

constmoduleA={// ...actions:{incrementIfOddOnRootSum({state,commit,rootState}){if((state.count+rootState.count)%2===1){commit('increment')}}}}

對(duì)于模塊內(nèi)部的 getter，根節(jié)點(diǎn)狀態(tài)會(huì)作為第三個(gè)參數(shù)暴露出來：

constmoduleA={// ...getters:{sumWithRootCount(state,getters,rootState){returnstate.count+rootState.count}}}

命名空間

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

在帶命名空間的模塊內(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 即可。

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

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

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

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

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

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

// 注冊(cè)模塊 `myModule`store.registerModule('myModule',{// ...})// 注冊(cè)嵌套模塊 `nested/myModule`store.registerModule(['nested','myModule'],{// ...})

模塊重用

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

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

在一個(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+ 支持）

作者：吃肉肉不吃肉肉

鏈接：http://www.itdecent.cn/p/ecad4ab4fa95

來源：簡(jiǎn)書

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。