ÔÚvuex½øÐÐvue×¢Èëºó¼´¿ÉÔÚÈÎÒ»×Ó×é¼þÖÐͨ¹ýthis.$storeÀ´·ÃÎÊvuex
import store from './store' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
1.ÔÚ×Ó×é¼þÖÐͨ¹ýthis.$store.state.±äÁ¿ÃûÔÚ×Ó×é¼þÖзÃÎÊstateÖÐij¸ö±äÁ¿µÄÖµ
this.tabbarActive = this.$store.state.tabbarActive //ÕâÀïµÄtabbarActiveΪ´æ´¢ÔÚvuexÖÐstateµÄ±äÁ¿Ãû
2.ÔÚ×Ó×é¼þÖÐͨ¹ýthis.$store.commit(¡®·½·¨Ãû'£¬²ÎÊý)À´½øÐжÔvuexÖеÄÊý¾Ý״̬½øÐиüÐÂ/²åÈë
1£©ÓÉÓÚvuexÖÐstoreµÄ¸Ä±äΨһµÄ;¾¶ÊÇÌá½»mutation,ͨ¹ýµ÷ÓÃʵÀý»¯ºóµÄvuex£¬mutationsÖÐÏà¶ÔÓ¦µÄ·½·¨¿ÉÒÔʵÏÖ¶Ô״ֵ̬µÄ¸Ä±ä£¬ÆäÖÐpayload¿ÉÒÔΪ²ÎÊý¶ÔÏ󣬻òÕßµ¥¸öÖµ£¬state²ÎÊýÔÚµ÷ÓÃʱĬÈÏΪµÚÒ»¸ö²ÎÊý¿ÉÒÔ²»´«£¬µ«ÊÇÔÚmutationsÖÐÉêÃ÷¸Ãº¯Êýʱ±ØÐë´«Èëstate
mutations: { changeTarBar (state,payload) { state.tabbarActive = payload } }
¨CÔÚ×Ó×é¼þÖиüÐÂstoreÖеÄ״̬
this.$store.commit("changeTarBar",idx)//ÆäÖÐidxΪ´«ÈëµÄ²ÎÊý
¨C»òÕßÕâÖÖд·¨,´ËʱµÄpayloadÔòΪһ¸ö²ÎÊý¶ÔÏ󣬿ÉÒÔͨ¹ýpayload.idx»ñµÃ×Ó×é¼þ´«ÈëµÄ²ÎÊýÖµ
this.$store.commit({ type:'changeTarBar',//type¶ÔÓ¦·½·¨Ãû idx, })
ÒÔÉÏÕâƪVuexÖÐʵÏÖÊý¾Ý״̬²éѯÓë¸ü¸Ä¾ÍÊÇС±à·ÖÏí¸ø´ó¼ÒµÄÈ«²¿ÄÚÈÝÁË£¬Ï£ÍûÄܸø´ó¼ÒÒ»¸ö²Î¿¼£¬Ò²Ï£Íû´ó¼Ò¶à¶àÖ§³Ö½Å±¾Ö®¼Ò¡£
转载请注明:谷谷点程序 » Vuex中实现数据状态查询与更改