Pinia之2：计数器案例、computed函数、异步action、storeToRefs函数、pinia调试
欢迎来到“雪碧聊技术”CSDN博客！
在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。
让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！
目录
1、在src目录下，新建stores目录（该目录专门用来存放store）
2、在stores目录下，新建文件counter.js，定义Store（包含数据+方法）
①computed函数，用来根据已有的属性，计算出新属性的值。
②在pinia的store中，引入axios，并编写异步方法（异步action）
③在组件中，使用钩子函数onMounted，调用异步方法（异步action），来获取结果、使用结果
①我们不想使用.来获取store中的属性了，于是尝试直接解构store，来获取属性
②如果想解构出store中的方法，那么不能加storeToRefs，而是直接解构
一、计数器案例（练习pinia的基本使用步骤）
1、在src目录下，新建stores目录（该目录专门用来存放store）
2、在stores目录下，新建文件counter.js，定义Store（包含数据+方法）
3、在组件中，使用Store
4、展示效果
以上就是使用pinia完成的一个计算机案例。
展示了pinia的基本使用步骤，要牢牢记住。
二、computed函数
1、computed函数是什么？
computed函数，又叫计算属性函数，用来根据一个属性的值，计算出另一个属性的值。
举例：
运行项目：
2、总结
①computed函数，用来根据已有的属性，计算出新属性的值。
②说白了，computed函数就是用来定义属性的。
三、异步action
1、什么是action？
其实我们action就是方法，即：刚才我们在计算机案例的store中定义的、用来操作属性的方法，如下：
2、action分类
①同步action
②异步action
3、举例：异步action的使用
①下载axios依赖
# 下载axios依赖
npm install axios
②在pinia的store中，引入axios，并编写异步方法（异步action）
③在组件中，使用钩子函数onMounted，调用异步方法（异步action），来获取结果、使用结果
④刷新页面，查看效果
四、storeToRefs函数
1、通过一个案例，引出storeToRefs函数
①我们不想使用.来获取store中的属性了，于是尝试直接解构store，来获取属性
②运行项目，查看效果
2、使用storeToRefs函数来解决上述问题
3、演示效果
4、注意：
①storeToRefs函数只能解构出store中的属性。
举例：
②如果想解构出store中的方法，那么不能加storeToRefs，而是直接解构
举例：
五、Pinia调试
1、在浏览器上，下载vue.js devtools插件
2、右击项目页面，点击检查，点击vue
结语
以上就是pinia的基本使用步骤、computed函数、异步action、storeToRefs函数、pinia调试的全部内容。
本专栏【Pinia】的全部内容到此结束~
想了解更多的前端知识，请关注本博主~~
原文地址：https://blog.csdn.net/qq_63981644/article/details/144095064
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！