鍍金池/ 問(wèn)答/HTML/ vuex 如何監(jiān)聽(tīng)頁(yè)面狀態(tài)的變化？

vuex 如何監(jiān)聽(tīng)頁(yè)面狀態(tài)的變化？

1.在A頁(yè)面修改了Vuex中狀態(tài)。需要在B頁(yè)面實(shí)時(shí)進(jìn)行監(jiān)聽(tīng)。
2.如何實(shí)現(xiàn)？

回答
編輯回答
編輯回答
無(wú)標(biāo)題

把要監(jiān)聽(tīng)的值 賦給一個(gè)變量然后在watch中 監(jiān)聽(tīng)

2018年5月22日 23:00
編輯回答
有你在

由于 Vuex 的狀態(tài)存儲(chǔ)本來(lái)就是響應(yīng)式的，從 store 實(shí)例中讀取狀態(tài)最簡(jiǎn)單的方法，就是在計(jì)算屬性中返回某個(gè)狀態(tài)。

在 B 頁(yè)面引入以下代碼：

computed: {
    myValue() {
        return this.$store.state.someValue
    }
}

此時(shí)，當(dāng) A 頁(yè)面通過(guò)某種方式更改了 this.$store.state.someValue 的值，B 頁(yè)面中 myValue 的值便會(huì)自動(dòng)得到更新。

如果題主所指的監(jiān)聽(tīng)，是要在這個(gè)值變化后觸發(fā)其他動(dòng)作，則需要在 B 頁(yè)面加入偵聽(tīng)屬性：

watch: {
    myValue: function(newVal, oldVal) {
        //其他業(yè)務(wù)代碼
    }
}
2017年2月2日 23:26
編輯回答
不歸路
  computed: {
    isOpened() {
      return this.$store.getters.sidebar.opened;
    },
  },

監(jiān)聽(tīng)getters.sidebar.opened

2017年2月26日 06:53
編輯回答
墨沫
import { mapGetters } from 'vuex' 

 computed: {
      ...mapGetters({
          auth: 'auth'
      })
    },
    watch: {
      auth: function(val,oldVal){
      //業(yè)務(wù)代碼
    },
2017年9月20日 11:14