上篇文章我們可以向後臺發送請求了，那麼如果請求來的數據都在組件內，隨着項目不斷增大，我們維護起來將會非常困難，還有另外一個問題就是請求來的數據，如果多個組件公用的話，傳遞起來也是非常困難的一件事情。於是就有了狀態統一管理，那麼就是今天的主角vuex。
vuex是什麼？
Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。
官方的解釋可以自行閱讀官方文檔吧，我這裏就用自己的語言把自己理解的說出來。
什麼時候使用呢？
項目逐漸龐大，發送請求越來越多，需要統一管理，並且多組件共用同一數據的時候。這個時候我們就可以把它加上了。
如何使用
vuex整體解釋對於初級學習的童鞋們來說還是有一定難度的，所以我想先把如何使用寫出來，然後在來分析其中的意思，然後自己寫一遍就基本可以理解了。
1、首先創建文件夾 store
我們把store理解成一個存放數據的對象，它掛載在全局，這樣所有的組件都可以訪問到store對象下的數據。
2、store文件夾下面創建index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
/* eslint-disable */
Vue.use(Vuex)
const state = {
articleList:[],
content:{}
}
export default new Vuex.Store({
state,
actions,
mutations
})該文件籠統來講就是申明一些數據，並且把數據掛載到全局的對象上
export default new Vuex.Store({
state,
actions,
mutations
})這段代碼的意思是創建 Vuex.Store對象，並在該對象的store對象中傳入相應的參數，參數中就把state傳入進去(可以理解成就掛載在Store全局對象上)。
在這裏我們申明瞭數據(狀態)，那麼如何才能讓組件使用到這些數據呢？
這個就要依賴另外兩個核心概念了：
action：
在這個層面，我們並不能直接更改狀態( mutation 必須同步執行)，但是我們可以在這裏,進行所有異步操作。
先來看看一個action.js中的代碼
import axios from 'axios'
const HOST = 'http://localhost:8082';
export default {
//初始化信息
initializeData({ commit,state }) {
axios.get(HOST+'/article/list')
.then(function (response) {
commit('INITIALIZE_DATA',response.data.list);
})
.catch(function (error) {
});
}
}我們可以在action中向後臺發送請求，以及處理相應的邏輯，然後根據業務需求發送
action中的方法都有兩個傳入參數：
1、commit
commit(‘INITIALIZE_DATA’,response.data.list); 整個vuex中只能通過通過commit改變數據狀態。
2、state
可以獲取到全局state中的數據。
mutation：
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方，並且它會接受 state 作爲第一個參數：
const INITIALIZE_DATA = 'INITIALIZE_DATA';
export default {
[INITIALIZE_DATA](state,data) {
state.articleList = data;
}
}第一個參數state,同樣還是全局的store中的state;
第二個參數data,就是action中調用commit的時候傳遞過來的參數
自此，申明狀態，改變狀態都已經有了，那麼組件中是如何觸發改變呢。
我們就把項目中的代碼貼出來看看吧。
<script>
import { mapState, mapActions } from 'vuex';
export default{
name:"contentView",
data(){
return {
}
},
props:['id'],
computed: mapState([
'content'
]),
components:{
moduleNav,leftSide,moduleNotice,footerModule
},
created(){
this.contentData(this.id);
},
methods: {
...mapActions([
'contentData'
])
}
}
</script>
第一步：在methods中添加
methods: {
...mapActions([
'contentData'
])
}將 this.contentData() 映射爲 this.$store.dispatch('contentData')，因此可以在組件中通過調用this.contentData()方法調用action中相應的方法。
第二步：
computed: mapState([
'content'
]),通過上面不難理解這個mapState也是輔助函數幫助映射的，不然的話我們還得通過 this.$store.state.content才能取值。
到此爲止vuex我們是全部引入了，總結下vuex的運行步驟吧。
- vue組件中調用 action中的方法
- action中通過和後臺進行交互，請求到數據(經過邏輯處理)，commit調用mutation
- mutation中 直接更改了state狀態
- state狀態改變後，會通知相應的組件更新界面
這樣就形成一個單向數據流的形式，多個組件都共享同一個store實例。store中包含 state,action,mutation。
這是一套狀態管理的方式，取決於項目的大小，項目小其實也沒有必要使用。
理解它之後，具體的一些api可以參考vuex的官方api：https://vuex.vuejs.org/zh-cn/intro.html