在一個(gè)大型的項(xiàng)目中左刽，難免會(huì)遇到復(fù)雜的數(shù)據(jù)處理捺信，這個(gè)時(shí)候經(jīng)常聽(tīng)到Vuex來(lái)管理，那么到底什么是vuex，我們?cè)撊绾稳ビ闷浚棵胱桑浚靠戳藥妆楣俜轿臋n掌挚，結(jié)合栗子似乎有點(diǎn)眉目雨席。
什么是vuex
官方文檔是這樣解釋的：它是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式，它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)吠式。
這個(gè)狀態(tài)自管理應(yīng)用包含以下幾個(gè)部分：
state陡厘，驅(qū)動(dòng)應(yīng)用的數(shù)據(jù)源；
view特占，以聲明方式將 state 映射到視圖糙置；
actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化是目。
state中保存的就是公共狀態(tài), 改變state的唯一方式就是通過(guò)mutations進(jìn)行更改择示，action只管中間處理殃恒，處理完我就給你伶跷，你怎么存我不管熏兄。
相信你在使用vuex之前也查了不少資料，看了許多理論嗤疯，是不是依然懵懵的冤今，下面我就用最簡(jiǎn)單的栗子（也是官網(wǎng)所提供的）以代碼的形式來(lái)逐一說(shuō)明：
<div id="app">
<p>{{count}}
<button @click="inc">+</button>
<button @click="dec">-</button>
</p>
</div>
<script>
new Vue({
el:'#app',
data () {
return {
count: 0
}
},
methods: {
inc () {
this.count++
},
dec () {
this.count--
}
}
})
</script>
也許你會(huì)說(shuō)，這樣不是挺好茂缚，再使用vuex是不是會(huì)顯得繁瑣戏罢？vue就是這樣數(shù)據(jù)是數(shù)據(jù)，方法是方法阱佛，結(jié)構(gòu)清晰帖汞，這也是它被受青睞的原因。這只是一個(gè)簡(jiǎn)單的數(shù)據(jù)處理凑术，當(dāng)你遇到復(fù)雜的數(shù)據(jù)處理時(shí)翩蘸，vuex就發(fā)揮它的優(yōu)勢(shì)啦
引入vuex
npm install vuex --save
在main.js中添加
import Vuex from 'vuex'
Vue.use( Vuex );
const store = new Vuex.Store({
//待添加
})
new Vue({
el: '#app',
store,
render: h => h(App)
})
1、State
官方：Vuex 使用單一狀態(tài)樹(shù)淮逊，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)催首。每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹(shù)讓我們能夠直接地定位任一特定的狀態(tài)片段泄鹏，在調(diào)試的過(guò)程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照郎任。
通俗：state就是Vuex中的公共的狀態(tài), 將state看作是所有組件的data, 用于保存所有組件的公共數(shù)據(jù)。
const store = new Vuex.Store({
state: {
count: 0
},
})
const app = new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
inc () {
this.count++
},
dec () {
this.count--
}
}
})
修改完代碼之后你可以看到, 將公共數(shù)據(jù)抽離出來(lái)后, 頁(yè)面沒(méi)有發(fā)生變化备籽。
2舶治、Getter
通俗的理解可以認(rèn)為是getter里的函數(shù)就是vuex里的計(jì)算屬性
const store = new Vuex.Store({
state: {
count: 0
},
getters: { // getters
countAdd: function (state) {
return state.count++
}
}
})
computed: {
count () {
return store.getters.countAdd
}
},
這時(shí)可以看到分井，數(shù)值加1
3、Mutations
官方：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation
通俗：將mutaions理解為store中的methods
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
inc: state => state.count++,
dec: state => state.count--
}
})
const app = new Vue({
el: '#app',
computed: {
count () {
return store.state.count
}
},
methods: {
inc () {
store.commit('inc')
},
dec () {
store.commit('dec')
}
}
})
每個(gè) mutation 都有一個(gè)字符串的 事件類型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)霉猛。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方尺锚，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：
mutaion: {
inc (state, n) {
state.count += n;
}
}
store.commit('inc', 10);
4、Actions
Action 類似于 mutation惜浅，不同在于：
Action 提交的是 mutation瘫辩，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作Ｌ诚ぁ７パ帷！mutations中絕對(duì)不允許出現(xiàn)異步
actions: {
incAsync ({ commit }) {
setTimeout(() => {
commit('inc')
}, 1000)
}
}
5裸影、Modules
由于使用單一狀態(tài)樹(shù)挣轨，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)空民，store 對(duì)象就有可能變得相當(dāng)臃腫刃唐。
為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）界轩。每個(gè)模塊擁有自己的 state、mutation衔瓮、action浊猾、getter、甚至是嵌套子模塊——從上至下進(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)
