ToB企服应用市场:ToB评测及商务社交产业平台

标题: Pinia---新一代的Vuex [打印本页]

---

作者: 道家人    时间: 4 天前
标题: 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到项目
  
  
  

使用Pinia实现计数器案例

核心步骤

• 界说store(state+action)
  
  
  

• 组件使用store
  
  
  

getters实现

• Pinda中的getters直接使用computed函数进行模拟
  

• 首先界说getter
  
• 并将getter返回出去
  
  
  

3. 调用即可

4. 效果图：
                                                                      

action怎样实现异步

• action中实现异步和组件中界说数据和方法的风格完全一致
  
  
  

storeToRefs

• 使用storeToRefs函数可以辅助保持数据（state+action）的相应式解构
  

相应式丢失

• 直接使用解构赋值的方法会出现相应式丢失，如下图：
  
  
  

解决方法：

• 使用storeToRefs方法包裹即可保持相应式更新，如下图：
  
  
  

注意：

• 方法直接从原来的counterStore中解构赋值
  
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4