vueX可以在頁面之間進行傳值,設(shè)置的屬性可供原局使用
該文件在vue項目中谜疤,src文件夾下的store文件夾下的index.js中
state
將需要的屬性在state中設(shè)置好佃延,且值為null。
例如:
state:{
sideList:null
}
getters
可以獲取state中屬性的值
例如:
getters: {
getSideList(state) {
return state.sideList
}
}
mutations
可以設(shè)置state中屬性的值
例如:
mutations: {
setSideList(state, list) {
state.sideList = list
}
},
使用方法
第一步:
在有數(shù)據(jù)的頁面想給其他組件進行傳值夷磕,首先要拿到數(shù)據(jù)履肃,在該頁面中進行設(shè)置。
設(shè)置方法:
需要方法進行觸發(fā)才可以設(shè)置坐桩,在methods中添加方法尺棋,并使用this.$store.commit('vuex中mutations對應(yīng)的方法名',數(shù)據(jù))
如:
methods: {
handleSelect(key) {
// 將側(cè)邊欄列表傳入 vuex中
this.$store.commit("setSideList",this.navList[key].list);
},
},
設(shè)置好就可以在其他頁面進行獲取绵跷,并且使用膘螟。
如果在特定的時期就需要在vuex中設(shè)置全局屬性,則需要用到vue的生命周期進行設(shè)置碾局。
第二步:
在想要的組件中獲取全局設(shè)置的屬性萍鲸,需要在計算屬性中進行獲取,使用this.$store.getters.vueX中g(shù)etters中對應(yīng)的方法名
如:
computed: {
// 將側(cè)邊欄列表從vuex中取出
sideList() {
return this.$store.getters.getSideList;
},
},
sideList可以直接在該組件使用擦俐。