Vue3組件不發(fā)生變化如何監(jiān)聽(tīng)pinia中數(shù)據(jù)變化
一、背景前提
在開(kāi)發(fā)過(guò)程中，我們需要將一些跨組件使用的的數(shù)據(jù)在pinia中進(jìn)行狀態(tài)管理，組件在初始化的時(shí)候我們能通過(guò)onMounted,computed,watch,watchEffect獲取到存儲(chǔ)在pinia state中的內(nèi)容，有一些特殊情況，在組件初始化之后我們無(wú)法通過(guò)以上四種情況獲取state中的內(nèi)容，這時(shí)候我們?cè)趺醋瞿兀?/p>
這時(shí)候我們就需要用到$subscribe
二、案例說(shuō)明
項(xiàng)目中時(shí)常我們會(huì)設(shè)置主題，初始化的時(shí)候我們會(huì)默認(rèn)一種主題，在網(wǎng)上我們也可以進(jìn)行主題切換設(shè)置不同的主題。
項(xiàng)目在定制主題時(shí)，我們需要主題去配置不同的色系，背景圖片等。
接下來(lái)，說(shuō)一下在項(xiàng)目中遇見(jiàn)的問(wèn)題，及解決方式。
在切換主題的時(shí)候，發(fā)現(xiàn)在組件中設(shè)置的svg背景圖片無(wú)法通過(guò)監(jiān)聽(tīng)獲取state中的主題，在pinia官網(wǎng)中我們找到了答案pinia官網(wǎng)插件
Vue3中我們可以通過(guò)v-bind在style中動(dòng)態(tài)綁定樣式
使用pinia中$subscribe進(jìn)行訂閱監(jiān)聽(tīng)
<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)聽(tīng)pinia中數(shù)據(jù)變化的文章就介紹到這了,更多相關(guān)Vue3監(jiān)聽(tīng)pinia數(shù)據(jù)變化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue對(duì)象的基本組成和Vue對(duì)象掛載的幾種方式,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-07-07
Vue3中createWebHistory和createWebHashHistory的區(qū)別詳析
這篇文章主要給大家介紹了關(guān)于Vue3中createWebHistory和createWebHashHistory區(qū)別的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06
Vue Router4與Router3路由配置與區(qū)別說(shuō)明
這篇文章主要介紹了Vue Router4與Router3路由配置與區(qū)別說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-12-12
Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程(支持快捷鍵)
右鍵菜單組件非常常見(jiàn),所有的前端開(kāi)發(fā)工程師都會(huì)遇到類(lèi)似的功能組件開(kāi)發(fā)需求,這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)右鍵菜單組件的超詳細(xì)教程,文中介紹的方法支持快捷鍵,需要的朋友可以參考下2024-02-02
Vue利用computed解決單項(xiàng)數(shù)據(jù)流的問(wèn)題
Vue是一個(gè)非常流行和強(qiáng)大的前端框架,它讓我們可以用簡(jiǎn)潔和優(yōu)雅的方式來(lái)構(gòu)建用戶(hù)界面,但是,Vue也有一些需要注意和掌握的細(xì)節(jié)和技巧,今天我們來(lái)分享一個(gè)Vue中非常經(jīng)典的問(wèn)題,也是一個(gè)非常實(shí)用的技巧,Vue利用computed解決單項(xiàng)數(shù)據(jù)流,需要的朋友可以參考下2023-08-08
uni-app資源引用的方法匯總(絕對(duì)路徑和相對(duì)路徑)
在基于UniApp開(kāi)發(fā)跨平臺(tái)應(yīng)用時(shí),開(kāi)發(fā)者通過(guò)特定語(yǔ)法來(lái)管理和加載應(yīng)用程序的各種資源文件,如圖片、字體、音頻、視頻等,在uni-app中,資源通常會(huì)被組織在項(xiàng)目的各個(gè)目錄下,本文給大家介紹了uni-app資源引用的方法匯總,需要的朋友可以參考下2025-01-01
在Vue?3中，可以使用多種方式來(lái)使用SVG圖標(biāo)，這篇文章主要為大家總結(jié)了五個(gè)常用的方式，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解下2023-08-08
如何在Vue3中實(shí)現(xiàn)自定義指令(超詳細(xì)!)
除了默認(rèn)設(shè)置的核心指令(v-model和v-show),Vue也允許注冊(cè)自定義指令,下面這篇文章主要給大家介紹了關(guān)于如何在Vue3中實(shí)現(xiàn)自定義指令的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
本篇文章主要介紹了vue2組件實(shí)現(xiàn)懶加載淺析,運(yùn)用懶加載則可以將頁(yè)面進(jìn)行劃分，需要的時(shí)候加載頁(yè)面，可以有效的分擔(dān)首頁(yè)所承擔(dān)的加載壓力.2017-03-03
這篇文章主要介紹的是Vue組件間的通信方式，本文將系統(tǒng)的介紹了幾種不使用Vuex，比較實(shí)用的組件間的通信方式，希望能幫助到大家2023-04-04