Vuex 簡(jiǎn)介
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。
例如(travel store)：
import * as types from '../types'//數(shù)據(jù)const state = { travelsList: [], searchKey: { page: 0, limit: 20 }, scroll: true}//用戶行為(可以處理異步),觸發(fā) mutations 來(lái)改變 stateconst actions = { /** * 獲取約跑步列表 */ getTravelsList({ commit }) { if(state.scroll) { commit(types.GET_TRAVELS_PAGE_NUM) commit(types.COM_LOADING_STATUS, true), commit(types.GET_TRAVELS_SCORLL_STATUS, false) api.TravelsList() .then(res => { console.log(res) commit(types.COM_LOADING_STATUS, false), commit(types.GET_TRAVELS_SCORLL_STATUS, true) commit(types.GET_TRAVELS_LIST, res) }) } }, /** * 參加 */ joinTravel({ commit }, id) { ... }}//可以過(guò)濾 state 中的數(shù)據(jù)const getters = { travelsList: state => state.travelsList, travelListIndex: state => state.travelsList.slice(0,4)}//唯一能改變 state 的方法(純函數(shù))const mutations = { [types.GET_TRAVELS_LIST](state, res) { if(state.searchKey.page <= 1) { state.travelsList = res.data } else { state.travelsList = state.travelsList.concat(res.data) } }, [types.GET_TRAVELS_SEARCH_KEY](state, params) { state.searchKey = params }, [types.GET_TRAVELS_PAGE_NUM](state) { state.searchKey['page'] += 1 }, [types.GET_TRAVELS_SCORLL_STATUS](state, status) { state.scroll = status }}//導(dǎo)出一個(gè) travel store 模塊export default { state, actions, getters, mutations}每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）。”store” 基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài)(state)數(shù)據(jù)。
Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。
你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交(commit) mutations。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。
用一張圖來(lái)理解一下
客戶端(Client) -> action -> mutations -> state -> 客戶端
可以看出在vuex中數(shù)據(jù)是單一流向的：視圖(view)觸發(fā)action，action提交(commit)到mutations，mutations改變state(數(shù)據(jù))，state的改變，相應(yīng)的組件也會(huì)相應(yīng)的更新。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
