vue多個(gè)組件中如何監(jiān)聽(tīng)vuex中同一個(gè)action的回調(diào)

vue單頁(yè)面應(yīng)用,在整個(gè)app入口,需要調(diào)用獲取用戶信息的接口,這個(gè)接口只調(diào)用一次,怎樣能夠在多個(gè)組件中獲取到這個(gè)接口完成的通知。

app.vue

  export default {
    mounted() {
      this.userInfo().then(res => {
        if (res.code === 200) {
            // 具體的操作
        }
      });
    },
    methods: {
      ...mapState(['userInfo'])
    }
  };

其他組件在mounted 獲取不到userInfo

export default {
    mounted() {
        this.userInfo // 這里獲取用戶信息為空,怎樣能獲取到用戶信息呢
    },
    methods: {
      ...mapState(['userInfo'])
    }
  };

已嘗試的解決方案。
第一種通過(guò)$watch監(jiān)聽(tīng)userInfo

watch: {
      userInfo(newValue){
        if(newValue.username){
          // 具體執(zhí)行函數(shù)
        }
      }
    },

第二種在入口處用loading狀態(tài)來(lái)控制,當(dāng)在入口處action結(jié)束時(shí)，通過(guò)v-if控制渲染,
這樣存在的問(wèn)題是當(dāng)這個(gè)接口掛了，整個(gè)頁(yè)面都是空白的

  <div id="app">
    <template v-if="loading">
       <router-view class="child-view"></router-view>
    </template>
  </div>

 export default {
    data(){
      return {
        loading:false  
      }
    },
    mounted() {
      this.userInfo().then(res => {
          this.loading=true
      })
    },
    methods: {
      ...mapState(['userInfo'])
    }
  }

想問(wèn)一下，有其他更好的辦法嗎？

回答

編輯回答

愚念

可以用getter，vuex的實(shí)時(shí)計(jì)算state

2017年5月6日 18:10

編輯回答

笑忘初

找到解決辦法了，創(chuàng)建一個(gè)變量保存promise，如果多個(gè)組件同時(shí)發(fā)出請(qǐng)求，第一個(gè)請(qǐng)求賦值給該變量，其他情況直接返回該變量，具體看代碼吧。

let getUserPromise = null;
let isLoading      = false;
const actions      = {
  GET_USREINFO({ commit, state }) {
    if (state.userInfo.username) {
      // 如果存在用戶信息，直接返回
      return Promise.resolve({
        code: 200,
        msg: 'ok',
        result: state.userInfo
      });
    } else {
      if (!isLoading) {
        isLoading = true;
        if (!getUserPromise) {
          getUserPromise = useSrv.getUserInfo().then((res) => {
            // 具體業(yè)務(wù)邏輯
            getUserPromise = null; // 重置，保證下次調(diào)用
            return res;
          }).finally(() => {
            isLoading = false;
          });
        }
      }
      return getUserPromise;
    }
  }
};

2017年4月21日 20:00

編輯回答

耍太極

用計(jì)算屬性就可以了，當(dāng)userinfo更新時(shí)會(huì)自動(dòng)觸發(fā)組件數(shù)據(jù)更新

computed: {
    ...mapState({
        userInfo: state => state.userInfo
    }),
},

2018年4月9日 13:05

編輯回答

扯不斷

async UPDATE_USERINFO (context) {
    const userinfo = await fly.get('/my/setting/personal/loadUserInfo').catch(e => {
      console.log(e)
    })
    context.commit('SET_USERINFO', userinfo.data)
},

路由代碼
if (to.meta.requiresAuth) {
    if (token) {
      if (store.state.userInfo) {
        next()
      } else {
        store.dispatch('UPDATE_USERINFO').then(() => {
            next()
          }
        )
      }
    } else {
      title = '賬號(hào)關(guān)聯(lián)'
      next({
        path: '/login',
      })
    }
  } else {
    next()
  }

你可能還需要一個(gè) 小工具

https://github.com/qinouz/vue... 若果又用請(qǐng)star

2017年11月11日 16:06