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

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

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

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

什么是Vue單頁面

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

頁面展示：通過控制當(dāng)前頁面路徑#號后面的路由名稱，來達到控制（切換）不同頁面的展示效果，請記?。哼@樣顯隱方式~頁面不會重新請求api。

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

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

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

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

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

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

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

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

通過vuex 獲取被更新頁面的this實例化實現(xiàn)

store/modules新建個文件，我這里命名為：updateOrderList.js (獲取指定頁面的this實例化對象)
const state = function() {
? return {
? ? pageThis: '', // 組件實例
? ? pagePaths: ['/canteen/orderManage/list'], // 需要更新數(shù)據(jù)的組件路徑
? ? timerTime: 1000 * 30,
? ? timerAction: null // 定時器
? }
}
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.在需要更新的頁面進行vuex方法引用（我這邊定義為orderManage.vue文件）：

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

4.在需要點擊更新的地方進調(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)
? }
}