自学内容网 自学内容网

登录前端笔记(一):pinia管理用户数据

一、把pinia加入到项目文件里
①、npm install pinia
②mian.ts

//①导入createPinia
import { createPinia } from 'pinia'
//②执行方法得到实例
const pinia = createPinia()
//③把pinia实例加入到APP应用里
app.use(pinia)

二、官网简单实例(定义store【state与action】后组件使用store)
定义一个store
①定义store采用与vue3组合式API统一语法
在这里插入图片描述
②组件里使用:把导出的方法useCounterStore 在组件里执行后,得到实例对象counterStore ,后使用对象里的属性。
在这里插入图片描述
③getters:实现doubleCount总会随着count值*2来变化
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
④action异步
在这里插入图片描述
前提:npm install axios
在这里插入图片描述
在这里插入图片描述
⑤storeToRefs:响应式解构
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、Pinia管理数据
①原理
在这里插入图片描述
在这里插入图片描述


原文地址:https://blog.csdn.net/weixin_46011290/article/details/142859336

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!