在一個大型的項目中，難免會遇到復(fù)雜的數(shù)據(jù)處理，這個時候經(jīng)常聽到Vuex來管理，那么到底什么是vuex，我們該如何去用？？？看了幾遍官方文檔，結(jié)合栗子似乎有點眉目。
什么是vuex
官方文檔是這樣解釋的：它是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式，它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)。
這個狀態(tài)自管理應(yīng)用包含以下幾個部分：
state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
view，以聲明方式將 state 映射到視圖；
actions，響應(yīng)在 view 上的用戶輸入導(dǎo)致的狀態(tài)變化。
state中保存的就是公共狀態(tài), 改變state的唯一方式就是通過mutations進行更改，action只管中間處理，處理完我就給你，你怎么存我不管。
相信你在使用vuex之前也查了不少資料，看了許多理論，是不是依然懵懵的，下面我就用最簡單的栗子（也是官網(wǎng)所提供的）以代碼的形式來逐一說明：
<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>
也許你會說，這樣不是挺好，再使用vuex是不是會顯得繁瑣？vue就是這樣數(shù)據(jù)是數(shù)據(jù)，方法是方法，結(jié)構(gòu)清晰，這也是它被受青睞的原因。這只是一個簡單的數(shù)據(jù)處理，當(dāng)你遇到復(fù)雜的數(shù)據(jù)處理時，vuex就發(fā)揮它的優(yōu)勢啦
引入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)樹，用一個對象就包含了全部的應(yīng)用層級狀態(tài)。每個應(yīng)用將僅僅包含一個 store 實例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個當(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ù)抽離出來后, 頁面沒有發(fā)生變化。
2、Getter
通俗的理解可以認為是getter里的函數(shù)就是vuex里的計算屬性
const store = new Vuex.Store({
state: {
count: 0
},
getters: { // getters
countAdd: function (state) {
return state.count++
}
}
})
computed: {
count () {
return store.getters.countAdd
}
},
這時可以看到，數(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')
}
}
})
每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)：
mutaion: {
inc (state, n) {
state.count += n;
}
}
store.commit('inc', 10);
4、Actions
Action 類似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接變更狀態(tài)。
Action 可以包含任意異步操作！！！mutations中絕對不允許出現(xiàn)異步
actions: {
incAsync ({ commit }) {
setTimeout(() => {
commit('inc')
}, 1000)
}
}
5、Modules
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會集中到一個比較大的對象。當(dāng)應(yīng)用變得非常復(fù)雜時，store 對象就有可能變得相當(dāng)臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割。
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)
