最新消息: 新版网站上线了!!!

Vuex中实现数据状态查询与更改

ÔÚ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中实现数据状态查询与更改