type
status
date
slug
summary
tags
category
icon
password

简介

Pinia Vue 生态里Vuex 的替代者,是一个全新的Vue 状态管理库,允许跨组件/页面共享状态

优点

  1. Vue3、Vue2都支持,
  1. 抛弃了 Mutations 的操作,只有 stategettersactions,简化了状态管理库的使用
  1. 不需要嵌套模块,符合 Vue3 的 Composition api,让代码更加扁平化
  1. 完整的 TypeScript 支持
  1. 代码更加简洁,可以很好的实现代码自动分割

安装

注意:pinia 是 Vue 的状态管理库,所以需要先安装 Vue 的项目环境

创建一个Store

在 main.ts 里引入 Pinia

创建Store状态管理库

/src 目录下,创建一个 store 文件夹,可在里面创建 index.ts 文件,定义状态容器(仓库)

在Vue3组件里读取Store数据

Pinia改变状态数据和注意事项

store 里,新增一个状态数据: count
在页面上新增button按钮,点击按钮,对count数据进行更改
上述代码都是通过 store.xxx 来获取到状态数据,可以通过解构来将代码再简化一点
但是要注意配合 storeToRefs() 方法来解构,否则的话数据会失去响应式

Pinia修改数据的4种方式

1. 直接在事件里修改 store.xxx 的值

2. 使用 $patch传递一个对象

3. 使用$patch传递一个函数

注:上述三种方法,看起来第一种方法代码量最少最简单,但是 Pinia 的官方已经明确表示 $patch 方法是通过优化的,会加快修改速度,对程序性能会有很大的好处,所以多个数据需要同时更新的情况下,推荐使用 $patch 方法进行更新

4. 使用actions

在 store 里先定义好 actions 函数
注意:在 actions 里,不能使用箭头函数,因为箭头函数绑定的是外部的 this
然后再在组件里调用该函数

Getters的使用

先在 /src/store.index.ts 文件里的 state 里增加一个 phone 的状态数据
然后再在 getters 里编写一个方法,在编写时,可以传递 state 参数来改变状态数据,也可以直接使用关键字 this 来改变数据( 注意要手动标明返回类型,这样ts才不会报错:)
然后到组件页面上去直接显示被隐藏的手机号
注意:Getters 是有缓存特性的,就算我们在页面上多次调用它,但只要数据状态未发生改变,它就不会被多次调用

Store的互相调用

新建一个 store 仓库
/src/store 下新建一个 candy.ts 文件
/src/store.index.ts 文件里,引入新建的 candy 这个store,然后再在 actions 里增加一个 getList() 方法
最后去页面上调用,再去控制台就可以看到打印出的数组内容
随手记题学习Vue3第十八节:transition生命周期和appear
衔蝉
衔蝉
一个普通的干饭人🍚
公告
type
status
date
slug
summary
tags
category
icon
password
欢迎来到衔蝉的博客小站✨
这里是我的个人学习、生活记录
--- 免责声明 ---
⚠️ 本站内容仅代表个人观点
⚠️ 本站内容仅供学习参考使用
--- 关于我 ---
我要如加菲猫一般地活着
一大碗杂碎面
就能换来一个艳阳天🌻