pinia源码解读四(常用工具方法)

解读一些经常使用的方法

$subscribe和$onAction

subscribe和onAction都是执行addSubscription方法只是subscribe多了一步对state进行watch

$subscribe(callback, options = {}) {
    const removeSubscription = addSubscription(
      subscriptions,
      callback,
      options.detached,
      () => stopWatcher()
    )
    // 对原始对象进行watch，这种触发就是direct类型
    const stopWatcher = scope.run(() =>
      watch(
        () => pinia.state.value[$id] as UnwrapRef<S>,
        (state) => {
          if (options.flush === 'sync' ? isSyncListening : isListening) {
            callback(
              {
                storeId: $id,
                type: MutationType.direct,
                events: debuggerEvents as DebuggerEvent,
              },
              state
            )
          }
        },
        assign({}, $subscribeOptions, options)
      )
    )!

    return removeSubscription
  }

addSubscription方法

export function addSubscription<T extends _Method>(
  subscriptions: T[],
  callback: T,
  detached?: boolean,
  onCleanup: () => void = noop
) {
  // 加入订阅的数组
  subscriptions.push(callback)

  const removeSubscription = () => {
    const idx = subscriptions.indexOf(callback)
    if (idx > -1) {
      subscriptions.splice(idx, 1)
      // 如果是subscribe 则会同步关闭state的watch
      onCleanup()
    }
  }

  if (!detached && getCurrentScope()) {
    // 调用的数组销毁则会去掉订阅
    onScopeDispose(removeSubscription)
  }

  return removeSubscription
}

$patch方法

对象写法

• 遍历patch对象，定义属性名为key

  • 如果state对象里有这个key且 patch和state对应key的值都为对象则重复执行这个步骤

  • 否则直接赋值

• 触发$subscribe 方法
  函数写法

• 把pinia.state.value[$id]直接当成参数传给外部函数，用户直接修改原始数据

• 触发$subscribe 方法