vue:pinia
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只是数据的响应式处理要用到
但方法的响应式直接解构赋值就行
