關(guān)于vuex的學(xué)習(xí)實(shí)踐筆記
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 來改變 state const 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) { ... } } //可以過濾 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)用。
用一張圖來理解一下
客戶端(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í)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
- 如何使用Vuex+Vue.js構(gòu)建單頁(yè)應(yīng)用
- vuex實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器
- 關(guān)于Vue.js 2.0的Vuex 2.0 你需要更新的知識(shí)庫(kù)
- Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實(shí)踐
- 巧用Vue.js+Vuex制作專門收藏微信公眾號(hào)的app
- 如何快速上手Vuex
- 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
- 基于vue2.0+vuex+localStorage開發(fā)的本地記事本示例
- Vue 2.X的狀態(tài)管理vuex記錄詳解
- Vue.js實(shí)戰(zhàn)之使用Vuex + axios發(fā)送請(qǐng)求詳解
相關(guān)文章
vue實(shí)現(xiàn)tagsview多頁(yè)簽導(dǎo)航功能的示例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)tagsview多頁(yè)簽導(dǎo)航功能,本文梳理了一下vue-element-admin項(xiàng)目實(shí)現(xiàn)多頁(yè)簽功能的整體步驟,需要的朋友可以參考下2022-08-08VUE中路由變化this.$router(push\replace\go\back)解讀
這篇文章主要介紹了VUE中路由變化this.$router(push\replace\go\back),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式?
本文主要介紹了如何監(jiān)聽Vue項(xiàng)目報(bào)錯(cuò)的4種方式,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04詳解處理Vue單頁(yè)面應(yīng)用SEO的另一種思路
這篇文章主要介紹了詳解處理Vue單頁(yè)面應(yīng)用SEO的另一種思路,本文主要針對(duì) vue 2.0 單頁(yè)面 Meta SEO 優(yōu)化展開介紹,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2018-11-11Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼
這篇文章主要介紹了Nuxt.js實(shí)現(xiàn)一個(gè)SSR的前端博客的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因
這篇文章主要介紹了解決vue+router路由跳轉(zhuǎn)不起作用的一項(xiàng)原因,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07electron-vue?運(yùn)行報(bào)錯(cuò)?Object.fromEntries?is?not?a?function
Object.fromEntries()?是?ECMAScript?2019?新增的一個(gè)靜態(tài)方法,用于將鍵值對(duì)列表(如數(shù)組)轉(zhuǎn)換為對(duì)象,如果在當(dāng)前環(huán)境中不支持該方法,可以使用?polyfill?來提供類似功能,接下來通過本文介紹electron-vue?運(yùn)行報(bào)錯(cuò)?Object.fromEntries?is?not?a?function的解決方案2023-05-05Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng)
這篇文章主要介紹了Vue中引入echarts的步驟及折線圖、柱狀圖常見配置項(xiàng),需要的朋友可以參考下2023-11-11