Pinia
一.什么是Pinia
Pinia是Vue的专属的最新状态管理库,是Vuex状态管理工具的替代品
1.提供更加简单的API(去掉了mutation)
2.提供符合组合式风格的API(和vue3新语法统一)
3.去掉了modules的概念,每一个store都是一个独立的模块
4.搭配TS一起使用提供可靠的类型推断
感觉就是pinia store里定义了属性和方法 可以被组件引入来使用
添加pinia到vue项目
1.安装
npm install pinia
2.应用
二.counter基础使用
使用Pinia实现计数器案例
pinia的基本用法如下
1.先在stores文件夹下定义一个…
2.然后就可以在组件中使用了
但一般用高级用法,用一个函数来定义一个store
三.getters和异步action
1.getters
getter是用computed来模拟实现的 方法如下
2.异步action
atcion中实现异步和组件中定义数据和方法的风格完全一致
四.storeToRefs函数
作用:辅助保持数据的响应式解构
组件里用store的属性对象
都要xxxx.count等等
那解构一下可不可以直接用count呢 ?
直接解构不行 会响应式丢失
但用storeToRefs包裹就可以了
原理是什么呢?
不用storeToRefs
打印
用了
打印
可以看到用了storeToRefs打印出来的是ref对象 具备响应式 而没用的打印的是0 无响应式
注意点
storeToRefs只是数据的响应式处理要用到
但方法的响应式直接解构赋值就行