vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法
更新時間：2023年10月12日 08:54:05 作者：、Diamond
這篇文章主要給大家介紹了關于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的簡單方法,store是一個狀態(tài)管理工具,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
import { watch } from "vue";
watch(
() => store.state.currentDevice,
(newVal, oldVal) => {
// to do
reload();
}
);需要注意：不能直接監(jiān)聽對象的屬性值，需要寫成getter函數(shù)。
總結：
watch 的第一個參數(shù)可以是不同形式的數(shù)據(jù)源，它可以是一個ref（包括計算屬性），一個響應式對象，一個getter函數(shù)，或多個數(shù)據(jù)源組成的數(shù)組。
不能直接監(jiān)聽響應式對象的屬性：
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-偵聽器
到此這篇關于vue3實現(xiàn)監(jiān)聽store中state狀態(tài)變化的文章就介紹到這了,更多相關vue3監(jiān)聽state狀態(tài)變化內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
基于vue 添加axios組件,解決post傳參數(shù)為null的問題
下面小編就為大家分享一篇基于vue 添加axios組件,解決post傳參數(shù)為null的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue前端框架—Mint UI的詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
在本篇文章中小編給大家整理的是一篇關于vue-devtools安裝使用的相關知識點內容，有需要的朋友們可以學習下。2019-10-10
這篇文章主要介紹了如何利用vue-router實現(xiàn)二級菜單內容轉換,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Vue函數(shù)式組件的應用實例詳解，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了Vue2?模版指令元素綁定事件執(zhí)行順序解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要介紹了Vue之mixin全局的用法詳解,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
html2canvas.js是一款可以在網頁上實現(xiàn)頁面截圖的js,它使用了html5和css3的一些新功能特性,實現(xiàn)了在客戶端對網頁進行截圖的功能,這篇文章主要給大家介紹了關于html2canvas使用的相關資料,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue3修改link標簽默認icon無效問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
vue實現(xiàn)下拉多選、可搜索、全選功能(示例代碼)
本文介紹了如何在Vue中實現(xiàn)一個樹形結構的下拉多選組件,支持任意一級選項的選擇,全選功能,以及搜索功能,通過在mounted生命周期中獲取數(shù)據(jù),并使用handleTree函數(shù)將接口返回的數(shù)據(jù)整理成樹形結構,實現(xiàn)了這一功能,感興趣的朋友一起看看吧2025-01-01