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数据变化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vuepress实现自定义首页的样式风格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue.js每天必学之表单控件绑定，如何在表单控件元素上创建双向数据绑定，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了vue3渲染函数(h函数)的变化,文中给大家介绍了h函数的三个参数详细说明及vue3 h函数-绑定事件，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue之prop与$emit的用法说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文将结合实例代码，介绍Vue批量更新dom的实现步骤，文中通过示例代码介绍的非常详细，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
本文主要介绍了vue3实现H5表单验证组件的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要介绍了 Vue 页面跳转不用router-link的实现代码，文中给大家介绍了vue router-link跳转传值示例,需要的朋友可以参考下2018-04-04
vite+ts vite.config.ts使用path报错问题及解决
这篇文章主要介绍了vite+ts vite.config.ts使用path报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
在Web应用程序中,实现拖拽和排序功能是非常常见的需求,本文为大家介绍了如何使用Vue来实现一个简单但功能强大的拖拽与排序功能,感兴趣的小伙伴可以参考下2023-10-10
Vue.js通过v-on指令和修饰符系统简化了事件处理,使开发者能够编写更清晰、更可维护的代码,本文给大家介绍Vue.js事件处理v-on 修饰符让你的事件逻辑更清晰,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-11-11
最新评论