store 是如何实现注入的

vuex3

Install 主要做了两件事情，第一使用闭包来防止插件重复注册，然后调用 applyMixin 方法，并传入 vue 构造函数

// src/store.js
let Vue;
export function install ( _Vue) {
  // 重复注册插件的检查
  if (Vue && _Vue === Vue) {
    if (__DEV__) {
      console.error(
        '[vuex] already installed. Vue.use(Vuex) should be called only once.'
      )
    }
    return
  }
  Vue = _Vue
  applyMixin(Vue)
}

applyMixin 方法如下，先做版本判断，核心在于 vuexInit 方法，先判断 vue 实例中是否存在 store 属性，若存在，说明为根实例，手动将 store 属性进行挂载；若不存在，说明为根实例的 children，则取 parent 的 store 属性，总而言之，vuex3 主要利用 mixin 特性和 beforeCreate 生命周期来实现 store 属性的挂载

// src/mixin.js
export default function (Vue) {
  const version = Number(Vue.version.split('.')[0])

  if (version >= 2) {
    // 初始化混入
    Vue.mixin({ beforeCreate: vuexInit })
  } else {
    // override init and inject vuex init procedure
    // for 1.x backwards compatibility.
    const _init = Vue.prototype._init
    Vue.prototype._init = function (options = {}) {
      options.init = options.init
        ? [vuexInit].concat(options.init)
        : vuexInit
      _init.call(this, options)
    }
  }

  /**
* Vuex init hook, injected into each instances init hooks list.
*/
  function vuexInit () {
    const options = this.$options
    // store injection
    if (options.store) {
      this.$store = typeof options.store === 'function'
        ? options.store()
        : options.store
    } else if (options.parent && options.parent.$store) {
      this.$store = options.parent.$store
    }
  }
}

vuex4

可以看到，新版本选择使用 provide / inject 来实现 store 的设置，并且将 store 实例挂载到 app 中，同样可以全局访问

// src/store.js
import { storeKey } from './injectKey'
install (app, injectKey) {
    app.provide(injectKey || storeKey, this)
    app.config.globalProperties.$store = this
}

// src/injectKey.js
import { inject } from 'vue'
export const storeKey = 'store'

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

Vuex 如何区分 state 是外部直接修改，还是通过 mutation 方法修改的

首先，无论在 vuex3 还是 vuex4，对于 state 的直接修改会直接报错，代码如下

 class Store {
   set state (v) {
    if (__DEV__) {
      assert(false, `use store.replaceState() to explicit replace store state.`)
    }
   }
 }

同时，如果在初始化 vuex 时，传入了 strict 选项，那么还会启动一个监听，保证 state 只能被 mutation 修改，代码如下

function enableStrictMode (store) {
  watch(() => store._state.data, () => {
    if (__DEV__) {
      assert(store._committing, `do not mutate vuex store state outside mutation handlers.`)
    }
  }, { deep: true, flush: 'sync' })
}

如果 store._committing 的值为 false，上述回调将会报错，这个值的改变，只会发生在提交 mutation，在提交 commit 时，实际会调用 _withCommit 来执行修改，代码如下

  _withCommit (fn) {
    const committing = this._committing
    this._committing = true
    fn()
    this._committing = committing
  }

使用以上两者，就可以限制外界对于 state 的修改，只能是单一来源（mutation）

为什么 Vuex 的 mutation 中不能做异步操作

• 可预测性：mutation 是更改状态的唯一方式，确保所有状态更改都是可追踪的。如果允许异步操作，状态的变化将变得不可预测，难以调试。
• 时间旅行调试：Vuex 提供了时间旅行调试功能，即可以回溯到任意一个状态。如果 mutation 中包含异步操作，那么这个功能将无法正常工作，因为异步操作的结果无法确定。
• 严格模式：Vuex 支持严格模式，在严格模式下，任何对状态的修改都必须在 mutation 中进行。如果 mutation 中有异步操作，严格模式将无法保证状态的改变是可控的

如何使用Vuex进行状态持久化，如何使用插件

使用 vuex-persistedstate 插件，下面是一个生成 mutation 前后 state 快照的插件

const store = createStore({
    plugins: [myPluginWithSnapshot],
})

const myPluginWithSnapshot = (store) => {
    let prevState = _.cloneDeep(store.state)
    // 这个回调在每次 mutation 之后调用
    store.subscribe((mutation, state) => {
        let nextState = _.cloneDeep(state)
        prevState = nextState
    })
}

Vuex 内部使用了 effectScope，有什么作用

先看看 vuex 内部使用 effectScope 做了什么，resetStoreState 方法的调用有两个时机，第一为手动卸载之前注册的模块，也就是外界显式调用 unregisterModule，第二则是 vuex 内部和构建工具集成的热更新逻辑，会多次调用

const resetStoreState = (store, state, hot) => {
  store.getters = {}
  const wrappedGetters = store._wrappedGetters
  const computedObj = {}
  const computedCache = {}
  const oldScope = store._scope
  const scope = effectScope(true)

  scope.run(() => {
    forEachValue(wrappedGetters, (fn, key) => {
      // use computed to leverage its lazy-caching mechanism
      // direct inline function use will lead to closure preserving oldState.
      // using partial to return function with only arguments preserved in closure environment.
      computedObj[key] = partial(fn, store)
      computedCache[key] = computed(() => computedObj[key]())
      Object.defineProperty(store.getters, key, {
        get: () => computedCache[key].value,
        enumerable: true // for local getters
      })
    })
  })
  store._scope = scope
  
  // dispose previously registered effect scope if there is one.
  if (oldScope) {
    oldScope.stop()
  }
} 

effectScope 是 vue 3.2 引入的 api，之前，对于组件中的状态（data，computed）会随着组件的卸载而自动销毁，此 api 提供了在组件之外手动收集副作用和清除的能力

可以看到，vuex 把 getters 变成了计算属性，这时，store.getters 上面的属性，就不在依附于组件的生命周期，而是单独管理，并且在下次调用时更新

Vuex 对比 pinia

模块化方案：Vuex 使用 module 来实现状态模块化，全局只存在一个 store，会存在多级嵌套的问题，pinia 直接定义多个 store

类型支持：vuex 仍然依赖手动添加类型标注，比如使用 useStore 时，想要获取 store 的类型，需要手动注入 InjectionKey，pinia 可以自动推导

包体积：pinia 体积更小

生态：vuex 更成熟，pinia 相对较新

概念：vuex 存在 mutation 和 actions，由于所有对于 state 的变更都会通过同步的 mutation，易于调试，pinia 中的 action 则包含了同步和异步的变更，调试难度有所增加