vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法
更新時間：2023年10月12日 08:54:05 作者：、Diamond
這篇文章主要給大家介紹了關(guān)于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法,store是一個狀態(tài)管理工具,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
import { watch } from "vue";
watch(
() => store.state.currentDevice,
(newVal, oldVal) => {
// to do
reload();
}
);需要注意：不能直接監(jiān)聽對象的屬性值，需要寫成getter函數(shù)。
總結(jié)：
watch 的第一個參數(shù)可以是不同形式的數(shù)據(jù)源，它可以是一個ref（包括計算屬性），一個響應(yīng)式對象，一個getter函數(shù)，或多個數(shù)據(jù)源組成的數(shù)組。
不能直接監(jiān)聽響應(yīng)式對象的屬性：
const obj = reactive({ count: 0 })
// 錯誤，因為 watch() 得到的參數(shù)是一個 number
watch(obj.count, (count) => {
console.log(`count is: ${count}`)
})這里需要寫成返回對象屬性的getter的函數(shù)
watch(
()=>obj.count,
(count)=>{
// todo
console.log(`count is: ${count}`)
}
)參考文檔：vue3-偵聽器
到此這篇關(guān)于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的文章就介紹到這了,更多相關(guān)vue3監(jiān)聽state狀態(tài)變化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
resetFields方法是Element Plus中el-form組件提供的一個非常有用的功能,它允許開發(fā)者輕松重置表單并移除校驗結(jié)果,本文給大家介紹element-plus中的resetFields()方法,感興趣的朋友跟隨小編一起看看吧2024-12-12
vite打包去除console.log和debugge的方法實踐
本文主要介紹了vite打包去除console.log和debugge的方法實踐,vite 已經(jīng)將這個功能內(nèi)置了,所以我們只需要修改配置文件,下面就來介紹一下如何修改2023-12-12
今天小編就為大家分享一篇Vue 菜單欄點擊切換單個class(高亮)的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了如何通過Vue3實現(xiàn)簡單的視頻播放與截圖功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-04-04
vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式
這篇文章主要介紹了vue如何設(shè)置動態(tài)的柵格占位、水平偏移量、類名、樣式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue的全局變量和全局?jǐn)r截請求器的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
我們正常在開發(fā)項目中,表格的風(fēng)格是一致的,但是表格或多或少會有些不同,有些是需要分頁,有些是按鈕功能不同,有些又需要加Tag,或者對時間進(jìn)行格式化等,這篇文章主要介紹了elementPlus表格二次封裝過程,需要的朋友可以參考下2024-07-07
Vue.js3.2響應(yīng)式部分的優(yōu)化升級詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
深入解析Vue中的this.$forceUpdate()的使用
this.$forceUpdate()?是一個重要的實例方法,本文主要介紹了深入解析Vue中的this.$forceUpdate()的使用,具有一定的參考價值,感興趣的可以了解一下2024-07-07
vue+Element中table表格實現(xiàn)可編輯(select下拉框)
這篇文章主要介紹了vue+Element中table表格實現(xiàn)可編輯，實現(xiàn)select下拉框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05