写作不易，未经作者容许禁止以任何模式转载！
如果感觉文章不错，欢送关注、点赞和分享！
继续分享技术博文，关注微信公众号 👉🏻 前端 LeBron
原文链接

Vuex4

Vuex 是在 Vue 中罕用的状态治理库，在 Vue3 公布后，这个状态治理库也随之收回了适配 Vue3 的 Vuex4

疾速过 Vuex3.x 原理

• 为什么每个组件都能够通过 this.$store 拜访到 store 数据？

  • 在 beforeCreate 时，通过 mixin 的形式注入了 store

• 为什么 Vuex 中的数据都是响应式的

  • 创立 store 的时候调用的是new Vue, 创立了一个 Vue 实例，相当于借用了 Vue 的响应式。

• mapXxxx 是怎么获取到 store 中的数据和办法的

  • mapXxxx 只是一个语法糖，底层实现也是从 $store 中获取而后返回到 computed / methods 中。

Vuex4 应用

Vue.useStore

• 在 Vue3 Composition API 中应用 Vuex

import {useStore} from 'vuex'

export default{setup(){const store = useStore();
    }
}

Vuex4 原理探索

去除冗余代码看实质

Vuex4 是怎么注入 Vue 的

install

• Vuex 是以插件的模式在 Vue 中应用的，在 createApp 时调用 install 装置

  • 也就是咱们罕用的 Vue.use 函数

    • 插件列表中退出 plugin
    • 执行 plugin 的装置函数

// Vue3 源码 app.use

export function createAppAPI<HostElement>(
  render: RootRenderFunction,
  hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {return function createApp(rootComponent, rootProps = null) {
  
    // 省略局部代码....
    const app: App = (context.app = {
      _uid: uid++,
      _component: rootComponent as ConcreteComponent,
      _props: rootProps,
      _container: null,
      _context: context,

      version,
      
      // 省略局部代码....

      use(plugin: Plugin, ...options: any[]) {if (installedPlugins.has(plugin)) {__DEV__ && warn(`Plugin has already been applied to target app.`)
        } else if (plugin && isFunction(plugin.install)) {installedPlugins.add(plugin)
          plugin.install(app, ...options)
        } else if (isFunction(plugin)) {installedPlugins.add(plugin)
          plugin(app, ...options)
        } else if (__DEV__) {
          warn(
            `A plugin must either be a function or an object with an "install" ` +
              `function.`
          )
        }
        return app
      },
      // 省略局部代码 ....
   }
}

• Store 类的 install，两种实现别离为挂载到全局和组件内拜访

  • 实现通过 inject 获取

    • 详情见下文 app.provide 解说

  • 实现 this.$store 获取

    • 将 store 挂载到全局 properties

// Vuex4 实现插件 install
install (app, injectKey) {
  // 实现通过 inject 获取
  app.provide(injectKey || storeKey, this)
  // 实现 this.$store 获取
  app.config.globalProperties.$store = this

Provide / Inject 架构示意图

上面接着看 provide 实现

app.provide 实现

• 每个 Vue 组件都有一个 context 上下文对象
• 对 context 上下文中的 provides 对象进行赋值

• createAppContext 是一个创立 App 上下文函数

  • 返回体中是一个具备一些常见的 Option（mixins、components 等）

  • Vue 的插件实现最次要的为其中一项 provides，具体实现形式为：

    • 将插件通过 key / value 的模式挂载到 app 上下文的 provides 对象上
    • inject 时，通过存入的 key 进行取出

// Vue3 app.provide 实现
provide(key, value) {
  // 已存在则正告
  if (__DEV__ && (key as string | symbol) in context.provides) {
    warn(`App already provides property with key "${String(key)}". ` +
        `It will be overwritten with the new value.`
    )
  }
  // 将 store 放入 context 的 provide 中
  context.provides[key as string] = value
  return app
}

// context 相干   context 为上下文对象
const context = createAppContext()
export function createAppContext(): AppContext {
  return {
    app: null as any,
    config: {
      isNativeTag: NO,
      performance: false,
      globalProperties: {},
      optionMergeStrategies: {},
      errorHandler: undefined,
      warnHandler: undefined,
      compilerOptions: {}},
    mixins: [],
    components: {},
    directives: {},
    provides: Object.create(null)
  }
}

useStore 的实现

function useStore (key = null) {return inject(key !== null ? key : storeKey)
}

Vue.provide

• Vue 的 provide API 也比较简单，相当于间接通过 key/value 赋值
• 以后实例 provides 和父级实例 provides 雷同时，通过原型链建设连贯

// Vue3 provide 实现
function provide<T>(key: InjectionKey<T> | string | number, value: T) {if (!currentInstance) {if (__DEV__) {warn(`provide() can only be used inside setup().`)
    }
  } else {
    let provides = currentInstance.provides
    const parentProvides =
      currentInstance.parent && currentInstance.parent.provides
    if (parentProvides === provides) {provides = currentInstance.provides = Object.create(parentProvides)
    }
    // TS doesn't allow symbol as index type
    provides[key as string] = value
  }
}

Vue.inject

• 通过 provide 时存入的 key 取出 store
• 有父级实例则取父级实例的 provides，没有则取根实例的 provides

// Vue3 inject 实现
function inject(
  key: InjectionKey<any> | string,
  defaultValue?: unknown,
  treatDefaultAsFactory = false
) {
  const instance = currentInstance || currentRenderingInstance
  if (instance) {
    // 有父级实例则取父级实例的 provides，没有则取根实例的 provides
    const provides =
      instance.parent == null
        ? instance.vnode.appContext && instance.vnode.appContext.provides
        : instance.parent.provides

    // 通过 provide 时存入的 key 取出 store
    if (provides && (key as string | symbol) in provides) {return provides[key as string]
    }
    // 省略一部分代码......
  } 
}

注入

• 为什么每个组件实例都有 Store 对象了?

  • 在创立组件实例的时候注入了 provides

    • 优先注入父级 provides
    • 兜底为注入 app 上下文的 provides

function createComponentInstance(vnode, parent, suspense) {
    const type = vnode.type;
    const appContext = (parent ? parent.appContext : vnode.appContext) || emptyAppContext;
    const instance = {
        parent,
        appContext,
        // ...
        provides: parent ? parent.provides : Object.create(appContext.provides),
        // ...
    }
    // ...
    return instance;
}

可从 vue 中引入 provide、inject、getCurrentInstance 等 API 进行库开发 / 高阶用法，这里不过多赘述。

Vuex4 执行机制

createStore

• 从 createStore 开始看起

  • 能够发现 Vuex4 中的 state 是通过 reactive API 去创立的响应式数据，Vuex3 中是通过 new Vue 实例
  • dispatch、commit 的实现根本是封装了一层执行，底层也是通过 store 去执行，不必过于关怀
  • 而 Vuex4 的响应式实现，同样是借用了 Vue3 的响应式 API reactive

// Vuex4 源码

export function createStore (options) {return new Store(options)
}
class Store{constructor (options = {}){
        // 省略若干代码...
        this._committing = false
        this._actions = Object.create(null)
        this._actionSubscribers = []
        this._mutations = Object.create(null)
        this._wrappedGetters = Object.create(null)
        this._modules = new ModuleCollection(options)
        this._modulesNamespaceMap = Object.create(null)
        this._subscribers = []
        this._makeLocalGettersCache = Object.create(null)
        
        // bind commit and dispatch to self
        const store = this
        const {dispatch, commit} = this
        this.dispatch = function boundDispatch (type, payload) {return dispatch.call(store, type, payload)
        }    
        this.commit = function boundCommit (type, payload, options) {return commit.call(store, type, payload, options)
        }
        
        
        const state = this._modules.root.state
        installModule(this, state, [], this._modules.root);
        resetStoreState(this, state)
      
        // 省略若干代码...
    }
}
function resetStoreState (store, state, hot) {
    // 省略若干代码...
    store._state = reactive({data: state})
    // 省略若干代码...
}

installModule

installModule 次要为按序初始化各模块，次要性能代码已高亮

1. Mutation
2. Action
3. Getter
4. Child（install）

// Vuex4
function installModule (store, rootState, path, module, hot) {
  const isRoot = !path.length
  const namespace = store._modules.getNamespace(path)

  // register in namespace map
  if (module.namespaced) {if (store._modulesNamespaceMap[namespace] && __DEV__) {console.error(`[vuex] duplicate namespace ${namespace} for the namespaced module ${path.join('/')}`)
    }
    store._modulesNamespaceMap[namespace] = module
  }

  // set state
  if (!isRoot && !hot) {const parentState = getNestedState(rootState, path.slice(0, -1))
    const moduleName = path[path.length - 1]
    store._withCommit(() => {if (__DEV__) {if (moduleName in parentState) {
          console.warn(`[vuex] state field "${moduleName}" was overridden by a module with the same name at "${path.join('.')}"`
          )
        }
      }
      parentState[moduleName] = module.state
    })
  }

  const local = module.context = makeLocalContext(store, namespace, path)

  module.forEachMutation((mutation, key) => {
    const namespacedType = namespace + key
    registerMutation(store, namespacedType, mutation, local)
  })

  module.forEachAction((action, key) => {
    const type = action.root ? key : namespace + key
    const handler = action.handler || action
    registerAction(store, type, handler, local)
  })

  module.forEachGetter((getter, key) => {
    const namespacedType = namespace + key
    registerGetter(store, namespacedType, getter, local)
  })

  module.forEachChild((child, key) => {installModule(store, rootState, path.concat(key), child, hot)
  })
}

订阅机制

看完了 Vuex4 是如何装置和注入的，最初来看看 Vuex 的订阅机制是如何实现的

• 和订阅机制无关的办法次要有

  • 订阅：subscribe、subscribeAction，别离用于订阅 Mutation 和 Action
  • 执行：commit、dispatch，别离用于执行
• 数据项有：_actionSubscribers、_subscribers

subscribe

订阅 store 的 mutation。handler 会在每个 mutation 实现后调用，接管 mutation 和通过 mutation 后的状态作为参数

所有的订阅 callback 都会被放入this._subscribers，可通过 prepend 选项抉择放入队头 / 队尾。

1. 将 callback 推入订阅数组
2. 返回一个勾销订阅的函数

// 用法   该办法会返回一个勾销订阅的函数
store.subscribe((action, state) => {console.log(action.type)
  console.log(action.payload)
}, {prepend: true}) 

// subscribe  Vuex4 源码实现
subscribe (fn, options) {return genericSubscribe(fn, this._subscribers, options)
}

function genericSubscribe (fn, subs, options) {if (subs.indexOf(fn) < 0) {
    options && options.prepend
      ? subs.unshift(fn)
      : subs.push(fn)
  }
  return () => {const i = subs.indexOf(fn)
    if (i > -1) {subs.splice(i, 1)
    }
  }
}

接着看看 commit 执行时如何触发这些订阅的 callback

1. 执行需 commit 的函数
2. 顺次执行 this._subscribers 中的订阅 callback

// commit 实现
commit (_type, _payload, _options) {
  // check object-style commit
  const {
    type,
    payload,
    options
  } = unifyObjectStyle(_type, _payload, _options)

  const mutation = {type, payload}
  const entry = this._mutations[type]

  // 执行需 commit 的函数
  this._withCommit(() => {entry.forEach(function commitIterator (handler) {handler(payload)
    })
  })x    

    // 执行订阅函数
  this._subscribers
    .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
    .forEach(sub => sub(mutation, this.state))
    
    // 省略若干代码....
}

subscribeAction

订阅 store 的 action。handler 会在每个 action 散发的时候调用并接管 action 形容和以后的 store 的 state 这两个参数

可订阅：执行前、执行后和谬误

1. 将订阅对象推入this._actionSubscribers
2. 返回一个勾销订阅函数

// 用法
store.subscribeAction({before: (action, state) => {console.log(`before action ${action.type}`)
  },
  after: (action, state) => {console.log(`after action ${action.type}`)
  },
  error: (action, state, error) => {console.log(`error action ${action.type}`)
    console.error(error)
  }
}, {prepend: true})

// Vuex4 源码实现
subscribeAction (fn, options) {const subs = typeof fn === 'function' ? { before: fn} : fn
  return genericSubscribe(subs, this._actionSubscribers, options)
}

function genericSubscribe (fn, subs, options) {if (subs.indexOf(fn) < 0) {
    options && options.prepend
      ? subs.unshift(fn)
      : subs.push(fn)
  }
  return () => {const i = subs.indexOf(fn)
    if (i > -1) {subs.splice(i, 1)
    }
  }
}

dispatch 执行时如何触发这些订阅函数？

// Vuex4 源码实现
dispatch (_type, _payload) {
  // check object-style dispatch
  const {
    type,
    payload
  } = unifyObjectStyle(_type, _payload)

  const action = {type, payload}
  const entry = this._actions[type]
  if (!entry) {if (__DEV__) {console.error(`[vuex] unknown action type: ${type}`)
    }
    return
  }

  // before 订阅执行
  try {
    this._actionSubscribers
      .slice() // shallow copy to prevent iterator invalidation if subscriber synchronously calls unsubscribe
      .filter(sub => sub.before)
      .forEach(sub => sub.before(action, this.state))
  } catch (e) {if (__DEV__) {console.warn(`[vuex] error in before action subscribers: `)
      console.error(e)
    }
  }

  // action 执行
  const result = entry.length > 1
    ? Promise.all(entry.map(handler => handler(payload)))
    : entry[0](payload)

  return new Promise((resolve, reject) => {
    result.then(res => {
        // after 订阅执行
      try {
        this._actionSubscribers
          .filter(sub => sub.after)
          .forEach(sub => sub.after(action, this.state))
      } catch (e) {if (__DEV__) {console.warn(`[vuex] error in after action subscribers: `)
          console.error(e)
        }
      }
      resolve(res)
    }, error => {
        // error 订阅执行
      try {
        this._actionSubscribers
          .filter(sub => sub.error)
          .forEach(sub => sub.error(action, this.state, error))
      } catch (e) {if (__DEV__) {console.warn(`[vuex] error in error action subscribers: `)
          console.error(e)
        }
      }
      reject(error)
    })
  })
}

一句话总结

Vuex3 -> Vuex4，次要实现形式将 mixin 注入改为了 provides / inject 的形式注入。

Provide / Inject 不仅用于 Vuex 实现，同样能够用于深层组件的数据传递

提醒：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

• 原文链接
• 掘金：前端 LeBron
• 知乎：前端 LeBron
• 继续分享技术博文，关注微信公众号 👉🏻 前端 LeBron