

首页  思维导图  详情



Vuex/Pinia源码

2023-06-29 14:32:03   0  举报





AI智能生成

Vuex/Pinia源码

源码

pinia

vuex

vue

模版推荐

作者其他创作

大纲/内容

Pinia

特点

直观

简化store/state/action的设计

类型安全

良好的typescript支持

开发工具支持

浏览器插件支持

可扩展

插件中间件

模块化设计

store拆分设计

极轻

实现代码少

实现思考

pinia如何存值如何取值

统一存在pinia.state中

获取store也是通过pinia.state获取

值如何响应式

reactive

问题

Q: 为什么废弃掉mutation

Q: state为什么需要computed跟踪变化

Pinia源码

执行流程

createPinia

创建pinia对象

install 供vue.use使用

将pinia存储到globalProperties

将toBeInstalled推入_p(插件列表)

use pinia的插件系统

将插件推入_p

如果没有被install则推入toBeInstalled

state 通过ref创建

所有defineStore创建的store都会在此备份

_a Vue实例

_e 通过effectScope创建

方便defineStore使用_e.run

_s 通过new Map创建

其他 toBeInstalled存储在install之前被pinia.use的pinia插件

defineStore

返回useStore函数

执行

判断是否安装pinia 通过全局变量activePinia

否

警告

是否注册过该id的store

 否

判断传入的第二参数是setup还是options

Setup Store

createSetupStore

初始化 pinia.state.value[$id]

创建store对象 通过reactive创建

返回store

_p

pinia实例

$id

store id

$onAction 监听action

监听action 执行wrapAction触发

$patch 修改state

判断传入的是不是function

function

传入 state = pinia.state.value[$id] 执行

state对象

合并当前state和传入state

$reset 重置state

通过$patch重置state

$subscribe 监听state

通过watch监听触发

通过$path触发

$dispose 注销该store

scope.stop() 注销setup的副作用

subscriptions = [] 清空$subscribe的监听

actionSubscriptions = [] 清空$onAction的监听

pinia._s.delete($id) 删除map存储的store

存储store pinia._s.set($id, store)

避免无限循环?

执行setup函数 通过_e(effectScope).run执行传入的setup 并得到setup的返回值

处理state 遍历处理setup返回的值

返回中的ref/reactive

处理SSR情况下的初始state

设置 pinia.state.value[$id][key] = prop

返回中的函数

使用wrapAction包裹函数执行

将store.$store指向pinia.state store.$store

get: pinia.state.value[$id]

set: $patch(($state) => { assign($state, state) })

安装执行插件

通过_e(effectScope).run执行插件函数

extender({ store, app: pinia._a, pinia, options: optionsForPlugin })

其他

内部方法

wrapAction

所有返回的函数都要经过wrapAction执行 主要有以下作用

容错执行action

promise action处理

try catch执行action

触发action监听

Option Store

createOptionsStore

创建setup函数

从options解构出state/actions/getters

合并state/actions/getters

pinia.state.value[id]指向state()

state使用toRefs+ref批量处理

getter使用computed处理

将setup传入createSetupStore执行 store = createSetupStore(id, setup, options, pinia, hot, true)

 是

根据id获取store pinia._s.get(id)

返回store

 Collect

Get Started

vuex

 Collect

Get Started

Vuex

 Collect

Get Started

spark wordcount源码分析

 Collect

Get Started

Vuex





0 条评论

下一页