pinia踩坑：需要直接触发仓库中的方法才可以改值，在定义的方法内部触发没有效果

最新推荐文章于 2024-06-19 15:46:35 发布
最新推荐文章于 2024-06-19 15:46:35 发布
阅读量327 收藏 1
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51002293/article/details/130597643
版权

父组件A

子组件B、子组件C

在A和B以及C中都有修改pinia仓库中数据的操作，C需要用到数据进行回显

一开始将修改的方法放在了父组件A中，子组件通过emit去触发这个方法

 

不管怎么尝试 C组件都无法监听到仓库中数据的变化

 

直接在子组件中触发仓库中的方法就ok了，还不知道什么原因 ，先记一下

codecodegirl
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
pinia实战 购物车(自定义插件实现pinia持久化)
每天都要努力学习哦~~
02-14 823
allSelectChange 每次点击全选，都需要同步单选状态 控制全选。导入 defineStore函数 interface 定义接口类 导出模块实例。state存放数据 goods商品数组实现接口 isAllSelect全选状态。getters 计算属性。通过filter过滤出选择项 reduce累加计算总计。3.allSelectChange 实现全选函数。2.updateNum实现商品加减函数。4.singChange实现单选函数。1.获取shop模块实例。actions 存放方法。
[pinia] pinia改完状态以后不生效（大坑）
jinwenshuo2007的博客
11-23 1795
pinia中只能用ref声明变量，不能用reactive，否则修改状态时不生效。
pinia中使用reactive声明变量，子页面使用时，值未改变,即不是响应式的（解决方法）
weixin_38345306的博客
10-26 2587
pinia中使用reactive声明变量，子页面使用时，值未改变,即不是响应式的（解决方法）
vue3使用pinia实现全局变量共享，主动监听变化，并与localStorage的值同步
青莳的博客
12-20 2275
vue3使用pinia实现全局变量共享，主动监听变化，并与localStorage的值同步
pinia --创建方式--使用方法--订阅--插件--$reset--持久化--组件外使用
u014105655的博客
01-03 953
pinia --创建方式--使用方法--订阅--插件--$reset--持久化--组件外使用
Vue3中双向数据绑定与Pinia实践+JS数据引用的循环修改问题
笨笨D幸福 - 后花园
05-04 5469
VUE3虽然出了很久了，但是很少深入研究，目前项目上遇到了一些问题，所以做个Note解决一下疑问： 1. v-bind/v-model怎么与Pinia进行结合 2. Object/Array数据大量处理时，为何有的修改不生效 3. 组合API与选项API选择 (TS不考虑) 4. This指针问题
vue+uniapp+pinia开发时使用pinia状态需要手动刷新才更新组件里的数据
qq_63112310的博客
12-16 1008
一开始我是引入定义的pinia状态，并且将他们解构（如下图），结果发现及时更新了状态值但是页面还是不更新，要手动刷新。通过网上查找资料发现解构赋值出现了问题。方法二：之间在引用数据那里引入状态。方法一：采用计算属性。
在vue中使用pinia，并且保持数据持久化
04-15
别捧一踩一，但是pinia可以取代vuex不是没有理由的，这个资源来自于这篇文章 https://blog.csdn.net/shaoyahu/article/details/130169637
操作系统实验：前端 vue3 + vite3 + pinia实现简易的生产者消费者模型
01-03
内容概要：操作系统实验，前端 vue3 + vite3 + pinia + ant design vue实现简易的生产者消费者模型，可以通过输入表单的形式手动调节生产者的消费速率和消费者的消费速率的形式，实现生产者消费者模型的可视化效果。...
pinia：using使用带有DevTools支持的composition api为Vue自动键入，模块化和轻量级商店
02-06
在西班牙语中， Piña像水果一样发音 Piña还是一个无效的包裹名称...这就是为什么它必须是pinia听起来很相似的原因 :pineapple: 基于带有devtools支持的composition api的Vue 3.x自动类型化，模块化和轻量级（但...
大壮考了小帅 5 道 Pinia 必问面试题
07-06
它们类似于 Vue 中的计算属性，可以根据需要计算并返回状态的特定部分或整体，提供了一个计算状态值的途径。 4. **Actions（操作）**：Actions 用于处理异步逻辑和副作用。它们在执行异步任务时保持状态的一致性，...
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
01-19
vue 官方文档已经简略地对 typescript 的支持进行了介绍，我们使用 Vue Cli3 直接生成项目 创建项目 :question_mark:为什么使用 Vue Cli3 构建项目 官方维护，后续升级减少兼容性问题 使用以下配置进行项目的生成...
vue3使用pinia配合pinia-plugin-persist实现持久化参数及全局数据监听，实现静态同步刷新
weixin_52051337的博客
02-27 2763
vue3使用pinia配合pinia-plugin-persist实现持久化参数及全局数据监听，实现静态同步刷新
VUE中子组件调用父组件的方法，父组件调用子组件的方法，父子组件互相传值和方法调用
qq_43393995的博客
03-07 2710
父组件（包含的子组件引用标签中加上ref属性)，这时给子组件标签使用ref，引用指向的就是子组件的实例。二、直接在子组件中通过“this.$parent.event”来调用父组件的方法。一、使用this.$emit()向父组件触发一个事件,父组件监听这个事件即可。三、父组件把方法传入子组件中,在子组件里直接调用。
vue3+pinia监听state中的变化
m0_55301924的博客
08-15 1180
【代码】vue3+pinia监听state中的变化。
vue3 + vite + ts + setup , 第十五练 vue3 中使用pinia (二) 如何使用getters、actions、 $reset、$subscribe、$onAction
csl125的博客
07-16 3374
vue3中使用pinia,getter和actions的使用
pinia setup方式构建 $reset方法失效解决方案
qq_43402051的博客
10-19 2893
pinia挂载时，重写一个$reset方法用来解决失效的问题。
Pinia使用要点
wang535956800的博客
09-14 2021
提取pinia使用重点
JS面试题第一章
最新发布
2301_79858637的博客
06-19 284
undefined表示的是无的原始值。但是null表示的是无 对象 0。
如果是在pinia内部定义一个方法清除这个pinia的数据呢？
07-28
如果你想在Pinia内部定义一个方法来清除整个Pinia的数据，你可以通过以下步骤实现： 1. 创建一个新的模块（例如名为"reset"的模块），用于存放重置（清空）Pinia数据的方法。在该模块中，你可以定义一个名为`resetPinia`的方法。 ```javascript import { defineStore } from 'pinia' export const useResetStore = defineStore('reset', { actions: { resetPinia() { // 在这里执行清空Pinia数据的操作 // 例如，可以使用$reset方法来重置所有模块的状态 this.$reset() } } }) ``` 2. 在你的Vue应用入口文件（通常是main.js或main.ts）中导入并注册该新模块。 ```javascript import { createApp } from 'vue' import { createPinia } from 'pinia' import { useResetStore } from './path/to/resetStore' const app = createApp(...) const pinia = createPinia() pinia.use(useResetStore) app.use(pinia) ``` 3. 现在，你可以在任何地方使用`useResetStore`来访问该模块并调用`resetPinia`方法来清空整个Pinia的数据。 ```javascript import { useResetStore } from './path/to/resetStore' const resetStore = useResetStore() resetStore.resetPinia() ``` 这样就可以在Pinia内部定义一个方法来清除整个Pinia的数据了。 希望对你有所帮助！如果你有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值