Vue項目中使用vuex詳解
一、vuex狀態(tài)共享樹
以前我們進行數(shù)據(jù)的共享,使用的是自定義事件,自定義屬性,eventBus,全局事件總線,pubsub等,以上的方式只能在小范圍內(nèi)進行數(shù)據(jù)共享,對于大范圍以及頻繁的數(shù)據(jù)共享來說,不太使用,尤其是在大型項目中的體驗感不佳
1.什么是Vuex
Vuex是實現(xiàn)組件全局狀態(tài)(數(shù)據(jù))管理的-種機制,可以方便的實現(xiàn)組件之間數(shù)據(jù)的共享。
2.vuex的優(yōu)點
1. 能夠在vuex中集中管理共享的數(shù)據(jù),易于開發(fā)和后期維護
2. 能夠高效地實現(xiàn)組件之間的數(shù)據(jù)共享,提高開發(fā)效率
3. 存儲在vuex中的數(shù)據(jù)都是響應式的,能夠?qū)崟r保持數(shù)據(jù)與頁面的同步
3.什么時候使用vuex
一般情況下,只有組件之間共享的數(shù)據(jù),才有必要存儲到vuex中;對于組件中的私有數(shù)據(jù),依舊存儲在組件自身的data中即可。
二、Vuex的基本使用
①安裝 vuex 依賴
npmi vuex--save
②導入 vuex 包
importVuexfrom'vuex'
Vuex.use(Vuex)
③創(chuàng)建 store 對象
const store=new Vuex.store({ //state中存放的就是全局共享的數(shù)據(jù) state:{count:0} })
④將 store 對象掛載到 vue 實例中
new vue({ el:'#app', render:h=>h(app), router, //將創(chuàng)建的共享數(shù)據(jù)對象,掛載到Vue實例中 //所有的組件,就可以直接從store中獲取全局的數(shù)據(jù)了 store })
三、Vuex的核心概念
四個vuex節(jié)點
1.State
State提供唯一的公共數(shù)據(jù)源,所有共享的數(shù)據(jù)都要統(tǒng)-放到Store的State中進行存儲。
//創(chuàng)建store數(shù)據(jù)源,提供唯一-公共數(shù)據(jù) conststore=newVuex.store({ state:{count:0} })
組件中使用共享數(shù)據(jù)的第一種方式
this.$store.state.數(shù)據(jù)變量名
組件中使用共享數(shù)據(jù)的第二種方式
從vuex中按需導入mapState函數(shù)
import{mapState}from'vuex'導入mapState函數(shù)
通過剛才導入的mapState函數(shù),將當前組件需要的全局數(shù)據(jù),映射為當前組件的computed計算屬性
computed:{ ...mapState(['變量名']) }
2.Mutation
Mutation 用于變更Store中的數(shù)據(jù)。vuex只能通過mutation變更Store數(shù)據(jù),不可以直接操作Store中的數(shù)據(jù)。通過這種方式雖然操作起來稍微繁瑣- -些,但是可以集中監(jiān)控所有數(shù)據(jù)的變化。
exportdefaultnewVuex.Store({ state:{ count:0 }, mutations:{//定義mutation add(state){ state.count++ } } }) //組件中使用 methods:{ add(){ //觸發(fā)mutation this.$store.commit('add') } }
可以在觸發(fā)mutations時傳遞參數(shù)
export default new Vuex.Store({ state:{ count:0 }, mutations:{ addN(state,step){ //變更狀態(tài) state.count+=step } } }) //組件中使用 methods:{ add(){ //觸發(fā)mutation時攜帶參數(shù) //commit的作用,就是調(diào)用某個mutation函數(shù) this.$store.commit('addN',3) } }
mutations第二種使用方式
this. $store.commit() 是觸發(fā)mutations的第一種方式,觸發(fā)mutations的第二種方式
//1.從vuex中按需導入mapMutations函數(shù) import{mapMutations}from'vuex'
通過剛才導入的mapMutations函數(shù),將需要的mutations函數(shù),映射為當前組件的methods方法
//2.將指定的mutations函數(shù),映射為當前組件的methods函數(shù) methods:{ ... mapMutations(['sub']) }
3.Action
Action用于處理異步任務(wù)。如果通過異步操作變更數(shù)據(jù),必須通過Action,而不能使用Mutation,但是在Action中還是要通過觸發(fā)Mutation的方式間接變更數(shù)據(jù)。
export default new Vuex.Store({ state:{ count:0 }, mutations:{ add(state){ state.count++ }, actions:{ addAsync(context){ setTimeout(()=>{ context.commit('add') },1000) } }, }) //組件中使用 methods:{ addAsync(){ 這里的dispatch函數(shù),專門用來觸發(fā)action this.$store.dispatch('addAsync') } }
4.Getter
Getter用于對Store中的數(shù)據(jù)進行加工處理形成新的數(shù)據(jù)。
1. Getter可以對Store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù),類似Vue的計算屬性。
2. Store中數(shù)據(jù)發(fā)生變化,Getter 的數(shù)據(jù)也會跟著變化。
定義Getter
export default new Vuex.Store({ state:{ count:0 }, getters:{ showNum(state){ return'當前最新的數(shù)量是:'+state.count } }
調(diào)用 Getter
使用getters的第一種方式
this.$store.getters.名稱
使用getters的第二種方式
import{mapGetters}from'vuex' computed:{ ... mapGetters(['showNum']) }
到此這篇關(guān)于Vue項目中使用vuex詳解的文章就介紹到這了,更多相關(guān)Vue vuex內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue3中el-table實現(xiàn)表格合計行的示例代碼
這篇文章主要介紹了vue3中el-table實現(xiàn)表格合計行,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01vue.js-div滾動條隱藏但有滾動效果的實現(xiàn)方法
下面小編就為大家分享一篇vue.js-div滾動條隱藏但有滾動效果的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03vue?動態(tài)路由component?傳遞變量報錯問題解決
這篇文章主要為大家介紹了vue?動態(tài)路由component?傳遞變量報錯問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-05-05