簡介：在Vue應用程序中使用Vuex進行狀態管理時，經常需要在組件中響應狀態的變化。這里來記錄一下

一. 在使用 Vuex 進行狀態管理時，我們經常需要在組件中響應狀態的變化。Vue 提供了兩種方式來實現這一點：computed 屬性和 watch 選項。這里，我們將通過一個示例來了解如何使用這兩種方式來監聽 Vuex 狀態變化。

首先，我們看一下組件中的代碼:

//VUE.JS
import { mapState } from 'vuex';export default {computed: {// 映射 Vuex 中的狀態到當前組件的計算屬性...mapState({areaLoadStatus: state => state.areaLoading,testDate: state => state.vuexRtspImg})},watch: {// 監聽 Vuex 中的狀態變化areaLoadStatus(newValue, oldVal) {console.log(newValue, oldVal)},testDate(newValue, oldVal) {console.log(newValue, oldVal)}}
}

在這段代碼中，我們使用了 mapState 輔助函數將 Vuex 中的兩個狀態(areaLoading 和 vuexRtspImg)映射到組件的計算屬性中。這樣，我們就可以在組件模板中直接使用這些計算屬性，而不必每次都通過 this.$store.state 來訪問狀態。

接下來，我們使用?watch 選項來監聽這兩個狀態的變化。當狀態發生變化時，相應的監聽器函數會被調用，新值和舊值會作為參數傳遞進來。在這個例子中,我們只是簡單地將新值和舊值打印到控制臺，但實際情況下嗎，你可以在這里執行任何所需的邏輯，例如更新組件的其他數據屬性或觸發事件函數(如發送 API 請求)。

值得注意的是，watch 選項并不是唯一的方式來響應狀態變化。如果你只需要在模板中使用狀態，那么計算屬性可能是一個更好的選擇。計算屬性會基于依賴的狀態自動重新計算，并且在狀態變化時會自動更新。這使得它比 watch 選項更高效。

二. 現在，讓我們看一下在 Vuex 中如何觸發狀態變化:

//VUEX
actions: {async callRtspImg(Con, row) {Con.state.areaLoading = true; // 更新 areaLoading 狀態await postRtsp({ rtspPath: row.videoUrl, cameraId: row.cameraId }).then(res => {if (res.code === 200) {Con.state.areaLoading = false; // 更新 areaLoading 狀態const data = res;Con.state.vuexRtsInfo.wd = data.imageWidth;Con.state.vuexRtsInfo.hg = data.imageHeight;Con.state.vuexRtsInfo.img = `data:image/gif;base64,${data.data}`;Con.state.vuexRtspImg = data.data; // 更新 vuexRtspImg 狀態} else if (res.code !== 200) {// 處理錯誤}}).catch(() => {}).finally(() => {})}
}

在這段代碼中，我們有一個名為 callRtspImg 的 Vuex action。在這個 action 中，我們首先將 areaLoading 狀態設置為 true，表示正在加載數據。然后，我們發送一個 API 請求來獲取數據。

如果請求成功(響應碼為 200)，我們會將 areaLoading 狀態設置回 false，并更新 vuexRtsInfo 對象中的幾個屬性。最后，我們還更新了 vuexRtspImg 狀態,將響應數據存儲在其中。

由于我們在組件中監聽了 areaLoading 和 vuexRtspImg 狀態的變化，所以當這些狀態發生更改時，相應的監聽器函數會被觸發。這使我們能夠根據狀態的變化執行所需的邏輯，例如更新用戶界面或發送其他 API 請求。

總的來說，使用 Vuex 進行狀態管理時，computed 屬性和 watch 選項為我們提供了一種優雅的方式來響應狀態變化。computed 屬性更適合于在模板中使用狀態，而 watch 選項則更適合于執行副作用或更新其他組件數據。選擇使用哪種方式取決于你的具體需求，但無論如何，這兩種方式都可以幫助你編寫更加可維護和易于理解的代碼。

創作不易，感覺有用，就一鍵三連，感謝(●'?'●)