Vue 2.X的狀態(tài)管理vuex記錄詳解

記住上述的順序情況:想要改變state,只能通過Mutation,雖然action可以直接改變state,這樣會(huì)使每個(gè)狀態(tài)可以方便的跟蹤和記錄(用Devtools跟蹤)
vue Method ---> Actions ---> Mutions ---> State (作用于vue)
在Vue2.X中使用vuex的情況:
1、多個(gè)視圖依賴于同一狀態(tài), 比如驗(yàn)證登陸情況。
2、來自不同視圖的行為需要變更同一狀態(tài) ,
3、不在一個(gè)組件樹(不是父子組件的關(guān)系),組件間頻繁的進(jìn)行數(shù)據(jù)和狀態(tài)的傳遞,更改。
新建一個(gè)mutation-types.js文件,這個(gè)文件里面只做了一件事,那就是記錄了事件類型,對(duì)mutation有個(gè)整體的把握。
store 中的狀態(tài)是響應(yīng)式的,在組件中調(diào)用 store 中的狀態(tài)簡(jiǎn)單到僅需要在計(jì)算屬性computed中返回即可。觸發(fā)變化也僅僅是在組件的 methods 中提交 mutations。
action中的函數(shù)觸發(fā),是在vue的methods中通過 this.$store.dispatch('方法名',參數(shù))
action內(nèi)部的函數(shù)具體寫法:只是起了一個(gè)承上啟下的作用,真正的處理邏輯在mutation中。
需要注意點(diǎn)就是:store.js里面的配置。(想把{}里面東西提出來,在App中new,屢次不成功。)

總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝
本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07
Ant Design的可編輯Tree的實(shí)現(xiàn)操作
這篇文章主要介紹了Ant Design的可編輯Tree的實(shí)現(xiàn)操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue如何實(shí)現(xiàn)pptx在線預(yù)覽
通過PPTXjs插件,實(shí)現(xiàn)PPTX文件在線預(yù)覽,需下載PPTXjs,將其引入HTML頁面,并編寫相應(yīng)的HTML和JS代碼,如果是移動(dòng)端還需調(diào)整div大小,這是一種便捷的前端PPTX轉(zhuǎn)HTML技術(shù),適合網(wǎng)頁展示使用2024-09-09
vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色
這篇文章主要介紹了vue-baidu-map實(shí)現(xiàn)區(qū)域圈線和路徑的漸變色方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
element-plus dialog v-loading不生效問題及解決
這篇文章主要介紹了element-plus dialog v-loading不生效問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-03-03

