快捷導(dǎo)航

vue頁(yè)面如何及時(shí)更新頁(yè)面數(shù)據(jù)問題

更新時(shí)間：2023年05月24日 14:56:49 作者：Greg_Zhong

這篇文章主要介紹了vue頁(yè)面如何及時(shí)更新頁(yè)面數(shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue頁(yè)面如何及時(shí)更新頁(yè)面數(shù)據(jù)

什么是Vue單頁(yè)面

代碼層面，可以將一個(gè)頁(yè)面HTML、JS、CSS代碼統(tǒng)一寫在一個(gè) .Vue文件里。

頁(yè)面展示：通過(guò)控制當(dāng)前頁(yè)面路徑#號(hào)后面的路由名稱，來(lái)達(dá)到控制（切換）不同頁(yè)面的展示效果，請(qǐng)記?。哼@樣顯隱方式~頁(yè)面不會(huì)重新請(qǐng)求api。

補(bǔ)充：（凡事有利也有弊）對(duì)于頁(yè)面不需要二次刷新來(lái)說(shuō)，不重新請(qǐng)求api，節(jié)約服務(wù)器資源，用戶在界面上體驗(yàn)度好，但是，如果某個(gè)單頁(yè)面需要二次加載（及時(shí)更新數(shù)據(jù)~比如：增刪修改后），此時(shí)頁(yè)面不會(huì)重新請(qǐng)求api?。槭裁?？在看一遍我前面的文字概述?。?/p>

vue頁(yè)面為什么~需要重新渲染頁(yè)面數(shù)據(jù)？

vue中，我們一般將請(qǐng)求方法，放在mounted( )中，但是只有第一次頁(yè)面加載會(huì)觸發(fā)mounted（），而后續(xù)是不會(huì)觸發(fā)這個(gè)生命周期函數(shù)的！，若此時(shí)你做完增刪修操作，數(shù)據(jù)怎么更新，怎么辦？

如何讓單頁(yè)面二次（后續(xù)）訪問頁(yè)面，數(shù)據(jù)渲染（更新）

使用頁(yè)面的watch偵聽事件，監(jiān)控路由發(fā)生改變，則請(qǐng)求需要更新數(shù)據(jù)的方法（函數(shù)），如下圖：這里更新數(shù)據(jù)的方法是querySalaryList()。

如圖：1 和 2 前者，就是監(jiān)聽路由發(fā)生改變，就觸發(fā)！導(dǎo)致其他頁(yè)面也會(huì)受到影響，（我第一次使用時(shí)，用的就是1方式，導(dǎo)致我請(qǐng)求里的彈框，在跳轉(zhuǎn)其他頁(yè)面都出現(xiàn)，這是非常不好的?。。。┰趺崔k，就使用 2 方式，當(dāng)獲取路由是特定路由，才觸發(fā)事件…

vue A頁(yè)面更新B頁(yè)面數(shù)據(jù)

應(yīng)用場(chǎng)景：全局定時(shí)刷新訂單狀態(tài)，等有待處理訂單時(shí)，進(jìn)行彈框提示，同時(shí)如果在訂單列表的話，也有待處理訂單狀態(tài)，進(jìn)行列表數(shù)據(jù)更新。

通過(guò)vuex 獲取被更新頁(yè)面的this實(shí)例化實(shí)現(xiàn)

store/modules新建個(gè)文件，我這里命名為：updateOrderList.js (獲取指定頁(yè)面的this實(shí)例化對(duì)象)
const state = function() {
? return {
? ? pageThis: '', // 組件實(shí)例
? ? pagePaths: ['/canteen/orderManage/list'], // 需要更新數(shù)據(jù)的組件路徑
? ? timerTime: 1000 * 30,
? ? timerAction: null // 定時(shí)器
? }
}
const mutations = {
? // 更新pageThis
? updateThisMutation(state, that) {
? ? console.log(state)
? ? state.pageThis = that
? }
}
const actions = {
? // 獲取組件this
? getComponentThisAction(context, that) {
? ? const path = that.$route.path
? ? const pagePaths = context.state.pagePaths
? ? if (pagePaths.includes(path)) {
? ? ? context.commit('updateThisMutation', that)
? ? ? if (context.state.timerAction) {
? ? ? ? return
? ? ? }
? ? }
? }
}
export default {
? namespaced: true,
? state: state,
? mutations: mutations,
? actions: actions
}

2.store/index.js下引入該文件：

import updateOrderList from './modules/updateOrderList'
const store = new Vuex.Store({
?? ?updateOrderList
})

3.在需要更新的頁(yè)面進(jìn)行vuex方法引用（我這邊定義為orderManage.vue文件）：

import { mapActions } from 'vuex'
mounted() {
? this.getComponentThisAction(this) // 調(diào)用vuex方法用于獲取實(shí)例化
},
beforeDestroy() {
? ? this.getComponentThisAction('') // 離開頁(yè)面時(shí)銷毀實(shí)例化
},
methods: {
? ? ...mapActions('updateOrderList', ['getComponentThisAction'])
})

4.在需要點(diǎn)擊更新的地方進(jìn)調(diào)用（我這邊放在了側(cè)邊欄）

import store from '@/store'
mounted() {
?? ?this.loadNewOrderData()
},
methods: {
? loadNewOrderData() {
? ? setTimeout(() => {
? ? ? this.$message({
? ? ? ? message: '數(shù)據(jù)更新了'
? ? ? })
? ? ? const pageThis = store.state.updateOrderList.pageThis
? ? ? if (pageThis && pageThis.$route.path === '/canteen/orderManage/list') {
? ? ? ? pageThis.getOrderList(pageThis.currentPage)
? ? ? }
? ? ? this.loadNewOrderData()
? ? }, 5000)
? }
}