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