当前位置: 首页 > news >正文

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

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

http://www.lryc.cn/news/493619.html

相关文章:

  • Microsoft Excel如何插入多行
  • Redis【1】- 如何阅读Redis 源码
  • shell查看服务器的内存和CPU,实时使用情况
  • 软件/游戏提示:mfc42u.dll没有被指定在windows上运行如何解决?多种有效解决方法汇总分享
  • 《Python基础》之函数、模块与库
  • selinux和防火墙实验
  • k8s Init:ImagePullBackOff 的解决方法
  • Spring AOP相关知识详解
  • selinux和防火墙
  • 【vue for beginner】Composition API 和 Options API 的区别
  • jmeter5.6.3安装教程
  • 关于Spring基础了解
  • 输入json 达到预览效果
  • DataLoade类与list ,iterator ,yield的用法
  • model_selection.train_test_split函数介绍
  • Springboot 读取 resource 目录下的Excel文件并下载
  • SQL EXISTS 子句的深入解析
  • 33.Java冒泡排序
  • Docker容器ping不通外网问题排查及解决
  • JavaScript 库 number-precision 如何使用?
  • faiss库中ivf-sq(ScalarQuantizer,标量量化)代码解读-2
  • 性能测试工具Grafana、InfluxDB和Collectd的搭建
  • 【ruby on rails】dup、deep_dup、clone的区别
  • 原生微信小程序画表格
  • Python实现IP代理池
  • 互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?
  • 32.4 prometheus存储磁盘数据结构和存储参数
  • C7.【C++ Cont】范围for的使用和auto关键字
  • 联通云服务器部署老项目tomcat记录
  • 剪映自动批量替换视频、图片素材教程,视频批量复刻、混剪裂变等功能介绍