Pinia---新一代的Vuex
关于Pinia的一些题目
pinia是用来做什么的？
[*] 会合状态管理工具，新一代的Vuex
Pinia中还必要mutation吗？
[*] 不必要，action既支持同步也支持异步
Pinia怎样实现getter？
[*] computed计算属性函数
Pinia产生的Store怎样解构赋值数据保持相应式
[*] storeToRefs
什么是Pinia?
[*] Pinia是Vue的专属的最新状态管理库，是Vuex状态管理工具的替换品
Pinia相较于Vuex的区别
[*] Pinia提供更加简单的API（去掉了mutation）
[*] 提供符合组合式风格的API（和Vue3新语法统一）
[*] 去掉了modules的概念，每一个store都是一个独立的模块
[*] 搭配Typescript一起使用提供可靠的范例推断
添加Pinia到Vue项目
[*] 使用create-vue创建空的项目：npm init vue@latest
[*] 按照官方文档安装pinia到项目https://i-blog.csdnimg.cn/direct/33dc358a9bcb40a987a7327a1c8fb81f.png
使用Pinia实现计数器案例
核心步骤
[*] 界说store(state+action)https://i-blog.csdnimg.cn/direct/8ceae31755ec4a67a83fe7c44d869b38.png
[*] 组件使用storehttps://i-blog.csdnimg.cn/direct/608ace3af84a41b3aefe48d3b71161b5.png
getters实现
[*] Pinda中的getters直接使用computed函数进行模拟
[*] 首先界说getter
[*] 并将getter返回出去https://i-blog.csdnimg.cn/direct/aa02d72d443846eeb26dad47ac6df0cf.png
3. 调用即可https://i-blog.csdnimg.cn/direct/414c3b2f08904e88b14ad7d017048c3e.png
4. 效果图：
https://i-blog.csdnimg.cn/direct/d11dbc43ecb64e52835186befbb75b6a.png
action怎样实现异步
[*] action中实现异步和组件中界说数据和方法的风格完全一致https://i-blog.csdnimg.cn/direct/a436d7ea2dda44e88d6f706d17412b7b.png
storeToRefs
[*] 使用storeToRefs函数可以辅助保持数据（state+action）的相应式解构
相应式丢失
[*] 直接使用解构赋值的方法会出现相应式丢失，如下图：https://i-blog.csdnimg.cn/direct/f9fa02d5bd4b4291882d354c72cfba60.png
解决方法：
[*] 使用storeToRefs方法包裹即可保持相应式更新，如下图：https://i-blog.csdnimg.cn/direct/09a5eec702a4467e876712a1246b9671.png
注意：
[*] 方法直接从原来的counterStore中解构赋值https://i-blog.csdnimg.cn/direct/89f2017ee7b14f86b6838ee35687fd3a.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]