vue 函数不注意使用就报错的坑

本文讨论了在编程中按钮调用函数时的常见错误,即未正确传递分页参数导致的问题。通过对比错误与正确的调用方式,解释了如何避免将按钮对象属性误作为分页参数传递,强调了在函数调用时使用括号的重要性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、声明变量

2、按钮中错误调用

这样接受的pageNum不是1而是按钮对象属性

3、正确调用

加个括号就可以了,不加括号是默认会用参数传过去的,分页就是默认传当前页码

转载于:https://www.cnblogs.com/vhen/p/9012555.html

### 解决 Vue3 `mounted` 生命周期中使用 Pinia 出现的错误 在 Vue 3 的组合式 API 中,可以通过 `onMounted` 钩子实现与选项式 API 中 `mounted` 生命周期钩子相同的功能[^1]。当在 `onMounted` 中集成 Pinia 进行状态管理时,如果遇到错误,通常可能是由于以下几个原因: #### 可能的原因分析 1. **未正确初始化 Pinia 实例** 如果在组件中忘记调用 `useStore` 或者没有通过 `app.use(pinia)` 将 Pinia 注册到应用实例上,则可能会导致运行时报错。 2. **异步操作中的上下文丢失** 在某些情况下,如果你在 `onMounted` 中执行了异步逻辑(例如从服务器获取数据),而这些逻辑依赖于 Pinia 提供的状态或方法,可能因为上下文问题或者未等待 Promise 完成而导致报错。 3. **响应式数据的可变性冲突** 使用 `readonly` 创建的数据是只读的,在开发模式下尝试修改它们会抛出警告或错误[^2]。因此,确保你在 `onMounted` 中会无意间修改被标记为只读的对象。 #### 示例解决方案 以下是修复该问题的一个完整示例代码片段: ```javascript // 引入必要的模块 import { onMounted } from 'vue'; import { useCounterStore } from '@/stores/counter'; // 假设有一个 counter store export default { setup() { const counterStore = useCounterStore(); // 初始化 Pinia Store onMounted(() => { try { console.log('Current Count:', counterStore.count); // 访问 store 数据 // 执行一些业务逻辑 if (counterStore.count === 0) { counterStore.increment(); // 修改 store 数据 } // 模拟异步请求 setTimeout(() => { console.log('Updated Count After Timeout:', counterStore.count); }, 1000); } catch (error) { console.error('Error during mounted lifecycle:', error.message); } }); return { counterStore }; // 返回模板使用 }, }; ``` 上述代码展示了如何安全地在 `onMounted` 中访问并更新来自 Pinia 的状态。注意以下几点: - 确保已经导入并注册了对应的 Store。 - 对可能出现异常的地方进行了捕获处理。 - 要在 `onMounted` 中直接修改由 `readonly` 包裹的数据结构。 #### 关键点总结 - 组合式 API 下的生命周期钩子应以前缀 `on` 形式书写,如 `onMounted` 替代传统的 `mounted` 方法。 - 利用 Pinia 来集中化管理全局状态可以极大简化跨组件通信的需求[^3]。 - 当涉及复杂交互时,请务必验证所有外部库是否已正确定义以及其内部机制是否会干扰当前流程。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值