Pinia 刷新页面store数据更新页面没有变化,响应式失效

这篇具有很好参考价值的文章主要介绍了Pinia 刷新页面store数据更新页面没有变化,响应式失效。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题:

当我在组件的 setup 中使用 useStore 来获取 store 的时候,Pinia.js 的 store 已经被更新了,但是组件渲染没变化。

import useManagerStore from "@/store/modules/managers";
const ManagerStore = useManagerStore();
const {count } = {ManagerStore}

原因:

当count我们在结构赋值的时候数据丢失了响应式

解决

1.计算属性

const count = computed(() => ManagerStore.count);

2.使用storeToRefs文章来源地址https://www.toymoban.com/news/detail-505258.html

const { count } = storeToRefs(ManagerStore);

到了这里,关于Pinia 刷新页面store数据更新页面没有变化,响应式失效的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue中 echarts响应式页面变化resize()

    Vue项目中开发数据大屏,使用echarts图表根据不同尺寸的屏幕进行适配 BUG:当页面进行缩放时图表大小没有变化 使用到的方法: resize() 调用echarts中内置的resize函数进行自适应缩放,然后添加监控,页面销毁时删掉,避免不必要内存占用 我们先看一下官方文档怎么说 resize 官

    2024年02月08日
    浏览(26)
  • vue3 - 使用reactive定义响应式数据进行列表赋值时,视图没有更新的解决方案

    在Vue 3.0 中我们使用 reactive() 定义的响应式数据的时候,当是一个数组或对象时,我们直接进行赋值,发现数据已经修改成功,但是页⾯并没有自动渲染成最新的数据;这是为什么呢? 就如同官网所说的reactive存在一些 局限性 :(官方的描述) 原因就是reactive函数会返回一个

    2024年02月13日
    浏览(42)
  • Vue3组件不发生变化,如何监听pinia中数据变化?

    在开发过程中,我们需要将一些跨组件使用的的数据在pinia中进行状态管理,组件在初始化的时候我们能通过onMounted,computed,watch,watchEffect获取到存储在pinia state中的内容,有一些特殊情况,在组件初始化之后我们无法通过以上四种情况获取state中的内容,这时候我们怎么做呢?

    2024年02月11日
    浏览(37)
  • Vue3 store仓库数据间流转 Vuex4 + Pinia

    上文 讲了vue2数据流转处理的方法 这文讲讲vue3 Vuex 在 Vue 3 中 可以使用 Vuex 4 来进行状态管理和存取数据。 1 创建一个 store 实例 2 在 main.js 中引入并挂载 store: 3 在组件中访问和修改数据: *** 在 Vue 3 中使用 Vuex 进行数据的存取和修改。state 存储数据,mutations 修改数据,ac

    2024年02月14日
    浏览(22)
  • 小程序setData执行后,页面没有刷新

     这是两个tab页面,通过点击来切换页面,其实就是改变后台的数据 只是点击后,后台数据更新,但是页面却没有重新渲染。 以下是分析: isPayee:  tab的值,当为1时,展示1号tab, 为0时,展示2号tab 点击tab,发现data中的isPayee改变了。  说明方法没问题,但是页面却不会变化

    2024年02月15日
    浏览(26)
  • 织梦DEDE后台更新了广告而前台没有变化的解决办法

    很多朋友在后台修改了广告代码之后,而前台的广告并没有发生变化,这个原因就是缓存问题了. 适合新手的解决方法: 如果你修改了广告代码之后,然后我们找到右侧的管理,管理下面有3个选项,[JS] [更改] [删除] ,这3个,这时我们只需要点下JS,这里就是预览这个JS广告

    2024年02月02日
    浏览(32)
  • pinia数据持久化,解决刷新state数据丢失

    下载插件 插件 pinia-plugin-persist 可以辅助实现数据持久化功能。 安装插件 在入口文件main.js中 配置数据持久化 数据已经存储到了本地

    2024年02月11日
    浏览(36)
  • Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题

    目录 Unity 问题 之 ScrollView ,LayoutGroup,ContentSizeFitter 一起使用时,动态变化时无法及时刷新更新适配界面的问题 一、简单介绍 二、问题现象 三、问题分析 四、问题解决思路 五、案例解决实现步骤 六、案例关键代码 Unity 在开发中,记录一些报错问题,以便后期遇到同样问题处

    2024年02月04日
    浏览(24)
  • uniapp微信小程序切换到tabber页面没有自动刷新

    前言 通过uni.switchTab跳转到tabber页面比如个人中心页面,更新的数据没有刷新。导致页面的数据还是修改之前的 解决方法 在uni.switchTab()加入回调函数; uni.switchTab成功跳转后调用success,此时可以拿到跳转后页面的page对象,从而调用页面onLoad方法重载页面。 或者 两种方法只是

    2024年02月11日
    浏览(38)
  • Vite实现版本更新检查,实现页面自动刷新

    前端版本更新检查,实现页面自动刷新 使用 vite 对项目进行打包,对 js 和 css 文件使用了 chunkhash 进行了文件缓存控制,但是项目的 index.html 文件在版本频繁迭代更新时,会存在被浏览器缓存的情况。 在发版后,如果用户不强制刷新页面,浏览器会使用旧的 index.html 文件,在

    2024年02月09日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包