鍍金池/ 問答/HTML/ vuex通過mounted獲取后臺導(dǎo)航,渲染A組件,然后點擊按鈕跳轉(zhuǎn)到B組件,在

vuex通過mounted獲取后臺導(dǎo)航,渲染A組件,然后點擊按鈕跳轉(zhuǎn)到B組件,在B組件中修改導(dǎo)航內(nèi)容,返回A組件渲染修改后的內(nèi)容

圖片描述

需求:點擊跳轉(zhuǎn)B組件,在B組件中增減刪除ABCD,然后點擊B組件的返回按鈕,A組件的nav隨時刷新
說明:這是A組件的獲取數(shù)據(jù),渲染頁面

` mounted(){
  this.$store.dispatch('acChannels')
  this.$store.commit('loading', true)
},
computed: {
  channels() {
    console.log(this.$store.state.channels)
    return this.$store.state.channels
  }
},`

這是B組件在修改數(shù)據(jù)后的代碼:

 methods: {
    backIndex() {
      this.$router.push("/topic");
    },
    deleteChannel(item, index) {
      if(index !== 0) {
        this.$store.commit('increment', index)
        this.addChannel.push(item)
      }
    },
    appendChannel(item, index) {
      this.addChannel.splice(index, 1)
      this.$store.commit('decrement', item)
    }

然后在B組件修改完數(shù)據(jù)之后,返回A組件,computed總執(zhí)行兩次,第一次輸出的是修改后的數(shù)據(jù),然后monted又執(zhí)行了,此時computed也再執(zhí)行一次,有輸出的是從數(shù)據(jù)庫獲得導(dǎo)航,怎么讓AB組件的數(shù)據(jù)保持同步或者在B組件數(shù)據(jù)改變后,A組件實時刷新呢

回答
編輯回答
故林

弄一個全局數(shù)組,然后在A頁面獲得這個數(shù)組內(nèi)容,在B頁面改變這個數(shù)組,A頁面也會跟著變化

2017年1月18日 03:04