pinia--新一代vue状态管理方案（上手篇）

2022-04-28 本文已影响0人习惯水文的前端苏

$\bullet$ 前言

过了五一就又要踏上找工作之旅了，面试题实在是有点看不下去，突然想起来pinia作为新一代vuex的状态管理方案，至今我还没上手试过，这着实不该...

$\bullet$ 初始化

npm init vite-app pinia-learn 创建vue3项目

npm install pinia@next 安装pinia

注册pinia

$\bullet$ 基本使用

$\ast$ options api方式

定义状态

使用状态

$\ast$ Composition api方式

定义状态

使用状态

$\bullet$ 批量读取状态

可以利用mapStores和mapState批量向当前组件注入状态

感觉一个一个引入比较麻烦，我这里做了些改动，以前文示例的cStore和rootStore为例

$\ast$ 修改根文件

将其他状态引入到根文件并导出（配合webpack的自动来完成应该会更好）

$\ast$ 在组件处批量导入并挂载到computed上

$\bullet$ 重置、更新与监听

$\ast$ reset--重置状态

$\ast$ patch--批量修改状态

如上图，通过changeMsg只能修改某一个状态，利用patch则可以进行批量更新

$\ast$ subscribe--监听状态变化

这只能监听注册到当前组件上的状态，如果想要对全部状态进行监听，可以使用watch观察pinia.state，但是上边改造的registerStore实际上已经会将所有状态注册到当前组件了，故感觉就不需要watch了，而且感觉也用处不是很大

$\bullet$ getter

基于前一个状态计算新状态，但是不会改变原状态，必须有显示返回值，可以是对象、值类型或函数，为函数时可以向内部传参以参与计算

$\bullet$ actions

$\ast$ 可以将异步任务在此处理，一般配合mapActions解构到methods中使用

$\ast$ 监听actions执行周期，接上图，对函数changeMsg的调用进行监听