Vue3组件不发生变化如何监听pinia中数据变化
更新时间：2023年11月28日 08:55:29 作者：修船工
这篇文章主要给大家介绍了关于Vue3组件不发生变化如何监听pinia中数据变化的相关资料,pinia是Vue的存储库,它允许您跨组件/页面共享状态,文中通过代码介绍的非常详细,需要的朋友可以参考下
一、背景前提
在开发过程中，我们需要将一些跨组件使用的的数据在pinia中进行状态管理，组件在初始化的时候我们能通过onMounted,computed,watch,watchEffect获取到存储在pinia state中的内容，有一些特殊情况，在组件初始化之后我们无法通过以上四种情况获取state中的内容，这时候我们怎么做呢？
这时候我们就需要用到$subscribe
二、案例说明
项目中时常我们会设置主题，初始化的时候我们会默认一种主题，在网上我们也可以进行主题切换设置不同的主题。
项目在定制主题时，我们需要主题去配置不同的色系，背景图片等。
接下来，说一下在项目中遇见的问题，及解决方式。
在切换主题的时候，发现在组件中设置的svg背景图片无法通过监听获取state中的主题，在pinia官网中我们找到了答案pinia官网插件
Vue3中我们可以通过v-bind在style中动态绑定样式
使用pinia中$subscribe进行订阅监听
<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\')';
});总结
到此这篇关于Vue3组件不发生变化如何监听pinia中数据变化的文章就介绍到这了,更多相关Vue3监听pinia数据变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue对象的基本组成和Vue对象挂载的几种方式,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-07-07
Vue3中createWebHistory和createWebHashHistory的区别详析
这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了Vue Router4与Router3路由配置与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-12-12
右键菜单组件非常常见,所有的前端开发工程师都会遇到类似的功能组件开发需求,这篇文章主要给大家介绍了关于Vue实现右键菜单组件的超详细教程,文中介绍的方法支持快捷键,需要的朋友可以参考下2024-02-02
Vue是一个非常流行和强大的前端框架,它让我们可以用简洁和优雅的方式来构建用户界面,但是,Vue也有一些需要注意和掌握的细节和技巧,今天我们来分享一个Vue中非常经典的问题,也是一个非常实用的技巧,Vue利用computed解决单项数据流,需要的朋友可以参考下2023-08-08
在基于UniApp开发跨平台应用时,开发者通过特定语法来管理和加载应用程序的各种资源文件,如图片、字体、音频、视频等,在uni-app中,资源通常会被组织在项目的各个目录下,本文给大家介绍了uni-app资源引用的方法汇总,需要的朋友可以参考下2025-01-01
在Vue 3中，可以使用多种方式来使用SVG图标，这篇文章主要为大家总结了五个常用的方式，文中的示例代码讲解详细，感兴趣的小伙伴可以了解下2023-08-08
除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令,下面这篇文章主要给大家介绍了关于如何在Vue3中实现自定义指令的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
本篇文章主要介绍了vue2组件实现懒加载浅析,运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力.2017-03-03
这篇文章主要介绍的是Vue组件间的通信方式，本文将系统的介绍了几种不使用Vuex，比较实用的组件间的通信方式，希望能帮助到大家2023-04-04
最新评论