Pinia之2：计数器案例、computed函数、异步action、storeToRefs函数、pinia调试

欢迎来到“雪碧聊技术”CSDN博客！

在这里，您将踏入一个专注于Java开发技术的知识殿堂。无论您是Java编程的初学者，还是具有一定经验的开发者，相信我的博客都能为您提供宝贵的学习资源和实用技巧。作为您的技术向导，我将不断探索Java的深邃世界，分享最新的技术动态、实战经验以及项目心得。

让我们一同在Java的广阔天地中遨游，携手提升技术能力，共创美好未来！感谢您的关注与支持，期待在“雪碧聊技术”与您共同成长！

目录

一、计数器案例（练习pinia的基本使用步骤）

1、在src目录下，新建stores目录（该目录专门用来存放store）

2、在stores目录下，新建文件counter.js，定义Store（包含数据+方法）

3、在组件中，使用Store

4、展示效果

二、computed函数

1、computed函数是什么？

2、总结

①computed函数，用来根据已有的属性，计算出新属性的值。

②说白了，computed函数就是用来定义属性的。

三、异步action

1、什么是action？

2、action分类

①同步action

②异步action

3、举例：异步action的使用

①下载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的基本使用步骤）

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】的全部内容到此结束~

        想了解更多的前端知识，请关注本博主~~