參考文檔[https://vuex.vuejs.org/zh-cn/state.html]
在vue開發(fā)中我們經(jīng)常會使用數(shù)據(jù)傳遞，當(dāng)維護的數(shù)據(jù)狀態(tài)不多的時候坟乾，我們經(jīng)常會使用props來傳遞數(shù)據(jù)迹辐。但是如果數(shù)據(jù)越來越復(fù)雜的的時候，按平時編程的習(xí)慣會定義多幾個全局變量甚侣，但是在js里面如果采用這種方式來明吩，開發(fā)者需要對自己維護的全局變量進行同步和異步的管理棋傍，這也是解決一個函數(shù)在讀數(shù)據(jù)的時候避免其他操作來寫數(shù)據(jù)兴喂。幸好js是單線程的，我們不必要解決進程和鎖的復(fù)雜問題从撼，只解決異步數(shù)據(jù)管理即可详羡。這個時候vue給我們上述問題提供一種數(shù)據(jù)方式那就是vuex仍律。vuex的核心是store,有幾個要點：
創(chuàng)建一個store:
const store=new Vuex.Store({
state,
getters,
actions,
mutations
})
1. state:
說白了就是里面包含幾個定義變量的對象，例如
const state = {
category: {list: [], count: 0},
apiList: [],
currentApi: null,
}
- getters:
gettters簡單點就是對state里面數(shù)據(jù)的get方法实柠，例如
export const getCategoryList = state => state.category.list
export const getCategoryCount = state => state.category.count
export const getApiList = state => state.apiList
export const getCurrentApi = state => state.currentApi
3. mutations：
既然有g(shù)et的方法很容易就想到應(yīng)該有set的方法吧水泉，所以mutations里面就有對state數(shù)據(jù)的修改。例如
export const selectApi = (state, api) => {
state.currentApi = api
}
只不過值得注意的是mutations方法里面不予許包含任何異步操作，只能包含同步操作草则。說到底就是對我們平時取值的同步操作的函數(shù)封裝钢拧。
4. action：
action是用來干嘛的呢？好像對數(shù)據(jù)的get和set操作都有了炕横。但是我們來看一個例子源内，例如我們經(jīng)常在ajax請求成功后，將取到的值賦給一個定義好的全局變量份殿，而這個設(shè)置全局變量的操作只能在放在回調(diào)函數(shù)里面膜钓。不知道有沒有發(fā)現(xiàn)上面所說的mutation里面只包含同步操作呢！所以呢vuex把action用來封裝異步操作的卿嘲，當(dāng)然也可以封裝同步操作颂斜。例如：
export const getApiListAjax = ({ commit }, options) => {
這里是異步請求.then((res) => {
commit('getApiList', {res: res, index: options.index})//這個是調(diào)用mutation里面的set方法
})
}
export const getApiList = ({ commit }, options) => {
//這里是同步操作了
commit('getApiList', {res: res, index: options.index})//這個是調(diào)用mutation里面的set方法
}
總結(jié)：
一下子拋出那么多概念，讓我們理一下有什么聯(lián)系腔寡，怎么調(diào)用的吧焚鲜！首先在vue組件里面引進store后，如果要使用set操作放前，則通過store.dispatch('getApiListAjax')來調(diào)用，這個是一個能夠操作state里面數(shù)據(jù)的對外提供的接口糯彬，這個時候我想在action里面調(diào)用mutation方法來操作state數(shù)據(jù)凭语，那就要調(diào)用commit()函數(shù)了，如commit('getApiList', {res: res, index: options.index})//這個是調(diào)用mutation里面的set方法撩扒。此時數(shù)據(jù)的set操作已經(jīng)完成了似扔。那我們來談?wù)?strong>get操作吧，很簡單就是把get引進來就可以用了搓谆，如果getters里有很多個get炒辉，引進來豈不是好蛋疼，沒錯vue2提供了mapGetters 輔助函數(shù)泉手，它僅僅是將 store 中的 getters 映射到局部計算屬性黔寇，具體用法參考vue文檔！
至此斩萌，我是一名麻瓜前端者缝裤！
