Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化
一、背景前提
在開發(fā)過程中，我們需要將一些跨組件使用的的數(shù)據(jù)在pinia中進(jìn)行狀態(tài)管理，組件在初始化的時(shí)候我們能通過onMounted,computed,watch,watchEffect獲取到存儲(chǔ)在pinia state中的內(nèi)容，有一些特殊情況，在組件初始化之后我們無法通過以上四種情況獲取state中的內(nèi)容，這時(shí)候我們?cè)趺醋瞿兀?/p>
這時(shí)候我們就需要用到$subscribe
二、案例說明
項(xiàng)目中時(shí)常我們會(huì)設(shè)置主題，初始化的時(shí)候我們會(huì)默認(rèn)一種主題，在網(wǎng)上我們也可以進(jìn)行主題切換設(shè)置不同的主題。
項(xiàng)目在定制主題時(shí)，我們需要主題去配置不同的色系，背景圖片等。
接下來，說一下在項(xiàng)目中遇見的問題，及解決方式。
在切換主題的時(shí)候，發(fā)現(xiàn)在組件中設(shè)置的svg背景圖片無法通過監(jiān)聽獲取state中的主題，在pinia官網(wǎng)中我們找到了答案pinia官網(wǎng)插件
Vue3中我們可以通過v-bind在style中動(dòng)態(tài)綁定樣式
使用pinia中$subscribe進(jìn)行訂閱監(jiān)聽
<i class="iClassTop"></i>
<style lang="scss" scoped>
.iClassTop:hover { background-image: v-bind(bgurl);}
</style>
import { useMapStore } from '@/store/index.js'
const mapStore = useMapStore();
const bgurl = ref('');
//這里有坑，mutation的events事件打包后不存在，在獲取pinia中值時(shí)，需要使用state
mapStore.$subscribe((mutation, state) => {
bgurl.value = bgurl.value = state.currentSkin==='dark'?'url(\'../light-dark.svg\')':'url(\'../light-white.svg\')';
});總結(jié)
到此這篇關(guān)于Vue3組件不發(fā)生變化如何監(jiān)聽pinia中數(shù)據(jù)變化的文章就介紹到這了,更多相關(guān)Vue3監(jiān)聽pinia數(shù)據(jù)變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue3之狀態(tài)管理器(Pinia)詳解及使用方式
- Vue3中的pinia使用方法總結(jié)(建議收藏版)
- Vue3狀態(tài)管理之Pinia的入門使用教程
- vue3項(xiàng)目使用pinia狀態(tài)管理器的使用
- vue3項(xiàng)目引入pinia報(bào)錯(cuò)的簡(jiǎn)單解決
- vue3 pinia踩坑及解決方案詳解
- Vue3中pinia的使用與持久化處理詳解
- vue3中vuex與pinia的踩坑筆記記錄
- vue3搭配pinia的踩坑實(shí)戰(zhàn)記錄
- vue3?pinia實(shí)現(xiàn)持久化詳解
- vue3中使用pinia(大菠蘿)狀態(tài)管理倉庫的項(xiàng)目實(shí)踐
- Vue3 狀態(tài)管理 Pinia 入門指南
相關(guān)文章
vuepress實(shí)現(xiàn)自定義首頁的樣式風(fēng)格
這篇文章主要介紹了vuepress實(shí)現(xiàn)自定義首頁的樣式風(fēng)格，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue.js每天必學(xué)之表單控件綁定，如何在表單控件元素上創(chuàng)建雙向數(shù)據(jù)綁定，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了vue3渲染函數(shù)(h函數(shù))的變化,文中給大家介紹了h函數(shù)的三個(gè)參數(shù)詳細(xì)說明及vue3 h函數(shù)-綁定事件，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了vue之prop與$emit的用法說明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
本文將結(jié)合實(shí)例代碼，介紹Vue批量更新dom的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-07-07
vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例
本文主要介紹了vue3實(shí)現(xiàn)H5表單驗(yàn)證組件的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼
這篇文章主要介紹了 Vue 頁面跳轉(zhuǎn)不用router-link的實(shí)現(xiàn)代碼，文中給大家介紹了vue router-link跳轉(zhuǎn)傳值示例,需要的朋友可以參考下2018-04-04
vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決
這篇文章主要介紹了vite+ts vite.config.ts使用path報(bào)錯(cuò)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
在Web應(yīng)用程序中,實(shí)現(xiàn)拖拽和排序功能是非常常見的需求,本文為大家介紹了如何使用Vue來實(shí)現(xiàn)一個(gè)簡(jiǎn)單但功能強(qiáng)大的拖拽與排序功能,感興趣的小伙伴可以參考下2023-10-10
Vue.js通過v-on指令和修飾符系統(tǒng)簡(jiǎn)化了事件處理,使開發(fā)者能夠編寫更清晰、更可維護(hù)的代碼,本文給大家介紹Vue.js事件處理v-on 修飾符讓你的事件邏輯更清晰,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-11-11