type
status
date
slug
summary
tags
category
icon
password
简介
Pinia 是
Vue 生态里Vuex 的替代者，是一个全新的Vue 的状态管理库，允许跨组件/页面共享状态优点
- Vue3、Vue2都支持，
- 抛弃了
Mutations的操作，只有state、getters、actions，简化了状态管理库的使用
- 不需要嵌套模块，符合 Vue3 的
Composition api，让代码更加扁平化
- 完整的
TypeScript支持
- 代码更加简洁，可以很好的实现代码自动分割
安装
注意：
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() 方法最后去页面上调用，再去控制台就可以看到打印出的数组内容
- 作者:衔蝉
- 链接:https://xianchan.ah.cn/article/pinia
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。