//vuex 官網(wǎng)上的核心插件
1.全局狀態(tài)管理 多組件共享狀態(tài)
2.任何一個組件數(shù)據(jù)發(fā)生改變,其他組件也要發(fā)生相應(yīng)的變化
一.vuex 基本使用? ------------------------------>和路由一樣
1.創(chuàng)建全局狀態(tài)管理實(shí)例? (新建一個文件夾)? ? ? ? ?
2.注冊(在mian.js里實(shí)例里注冊)
3.在組件中使用全局狀態(tài)值
? 3.1 一種是獲取,渲染全局狀態(tài)值
? 3.2 修改全局狀態(tài)值
二.安裝? npm install vuex
三.使用
?方式一
let? store = new Vuex.Store({
? state:{? ? ? ? ? ? ? ? ? ? ? //全局狀態(tài)值 可以在所有組件里用this.$store.stata.name
? ? name:'韓梅梅'
? },
? ? },
? ? mutations:{? ? ? ? ? ? ? ? ? ? ? ? ? ? //修改全局狀態(tài)值，必須通過mutations來做,其他不行
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?他需要this.$store.commit(要觸發(fā)的方法名卜录，傳遞的參數(shù))觸發(fā),可以在任何地方觸發(fā)
? ? changeName(state,params){? ? ? ? ? //參數(shù)一全局狀態(tài)值? 參數(shù)二參數(shù)
? ? ? state.name='李雷雷'? ? ? ? ? ? ? //或state.name= 傳來的參數(shù)
? ? }
? ? }
})
使用方式二
1.實(shí)例里
let? store = new Vuex.Store({
? state:{
? ? age:16,? ? ? ? ? ? ? //全局狀態(tài)值
? },
? mutations:{? ? ? ? ? ? ? ? ? //修改全局狀態(tài)值臣樱，必須通過mutations來做
? ? changeAge(state,param){? ? ? ?
? ? ? state.name=params.age
? ? }
? },
? actions:{? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //觸發(fā)修改全局狀態(tài)值,
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //特點(diǎn)：1.存放異步---------------->目的:統(tǒng)一管理異步請求,減少代碼量
? changeAction({context},params){? ? ? //2.時間旅行:每一次改變都可檢測到-----vue-devtools(vue開發(fā)者工具)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //可以方網(wǎng)絡(luò)請求
? //let {commit}=context,? ? ? ? ? ? ? ? ? context里面有commit方法,還有很多方法
commit('changeAge',params)
? }
? }
})
2.組件里
this.$store.dispatch("changeAction",要傳遞的參數(shù))? ? //這種方法,通過dispach觸發(fā)action,通過commit觸發(fā)mutations
//如果vue開發(fā)者工具綠了,一定是vue做的,
//vue做的,開發(fā)者工具不一定亮
/*************************************************************************************************************************/
let? store = new Vuex.Store({
? state:{
? ? name:'韓梅梅'? ? ? ? ? ? ? //全局狀態(tài)值
? },
? mutations:{? ? ? ? ? ? ? ? ? //修改全局狀態(tài)值敛助，必須通過mutations來做
? ? changeName(state,param){? ? ? ?
? ? ? state.name='李雷雷'
? ? ? console.log(state,param)
? ? }
? },
? getters:{? ? ? ? ? ? ? ? ? ? ? ? ? ? //getters相當(dāng)于vue里面的computed計(jì)算屬性,對數(shù)據(jù)做一些處理
? ? double(state){? ? ? ? ? ? ? ? ? ? //getters里面的數(shù)據(jù)頁可以直接在頁面上使用
? ? ? return state.name+state.name
? ? }
? },
})
/************************************************************************************************************/
輔助函數(shù) 上面那樣寫代碼量多---------------------產(chǎn)生了輔助函數(shù)
//輔助函數(shù):幫助我們減少代碼量
mapState? ? ? mapMutations? ? ? ? mapGetters? ? mapActions
mapState 在組件里
1. import? {mapState}? from 'vuex'? ? ? ? ? ? ? ? mapstate將 state映射到計(jì)算屬性里
2.? ? ? ? computed:{
? ...mapState(['name']})
}
3.然后在組建立直接使用name
-------------------------------------------------------------------------------------------------
mapGetters? ? mapGetters將 getters映射到計(jì)算屬性里
? ? 1. import? {mapGetters}? from 'vuex'? ? ? ? ? ? ? ? mapstate將 state映射到計(jì)算屬性里
? ? 2.? ? ? ? computed:{
? ? ? ...mapGetters(['double']})
? ? }
? ? 3.然后在組建立直接使用double.
-------------------------------------------------------------------------------------------------
mapActions? ?
? ? ? ? ? ? 1. import {mapActions}? from 'vuex'
2.? methods:{
...mapActions(['方法名']),
? ? change(){
this.actions里面的方法名(傳給actions的參數(shù))
}
}
---------------------------------------------------------------------------------------------------
mapMutations?
? ? ? ? ? ? 1.import {mapMutations} from 'vuex'
2.methods:{
...mapMUtations(['change'])
change(){
this.mutations里面的方法名(傳給mutations的參數(shù))
}
},
/***********************************************************************************************************************/
store里面的第五個配置項(xiàng)-----------modules(模塊)
? ? ? ? ? ? ? 是前四個配置項(xiàng)的集合
const store = new Vue.Store({
modules:{
//這里是hehe模塊
hehe:{
namespaced:true,? ? ? ? ? ? //開啟命名空間? 防止模塊出問題
state:{},
mutations:{},
actions:{},? ? ? ? ? ? ? ? //命名空間可以給mutations,actions,getters前面添加模塊名,------>防止沖突
getters:{}
},
//這里是xixi模塊
? ? xixi:{
state:{},
mutations:{},
actions:{},
getters:{}
}
}
})
? ? ? ? ? ? //在組里console.log(this) 這時state有hehe,xixi兩個模塊名
? ? 1.模塊化之后,state取值需要多加一級模塊名
2.其他三個配置項(xiàng)沒變化
因此使用時:
computed:{
...mapState({
name:state=>this.state.hehe.name
})
? ? ? ? ? ? ? ? ? ? }
