一篇文章让你彻底了解vuex的使用及原理（上）

文章列表

vuex详解

文章讲解的Vuex的版本为4.1.0，会根据一些api来深入源码讲解，帮助大家更快掌握vuex的使用。

vuex的使用

使用Vue实例的use方法把Vuex实例注入到Vue实例中。

const store = createStore({...})
createApp(App).use(store)

use方法执行的是插件的中的install方法

src/store.js

export class Store {// ...// app 是vue实例install(app, injectKey) {app.provide(injectKey || storeKey, this)app.config.globalProperties.$store = this...}
}

从上面可以看到Vue实例通过 provide方法把 store 实例 provide 到了根实例中。同时添加了一个全局变量$store，在每个组件中都可以通过this.$store来访问store实例。

app.provide 是给 Composition API 方式编写的组件用的，因为一旦使用了 Composition API ，我们在组件中想访问 store 的话会在 setup 函数中通过 useStore API 拿到.

import { useStore } from 'vuex'
export default {setup() {const store = useStore()}
}

useStore的实现也在src/injectKey.js文件中：

import { inject } from 'vue'
export const storeKey = 'store'
export function useStore (key = null) {return inject(key !== null ? key : storeKey)
}

Vuex 就是利用了 provide/inject 依赖注入的 API 实现了在组件中访问到 store，由于是通过 app.provide 方法把 store 实例 provide 到根实例中，所以在 app 内部的任意组件中都可以 inject store 实例并访问了。

除了 Composition API，Vue3.x 依然支持 Options API 的方式去编写组件，在 Options API 组件中我们就可以通过 this.$store 访问到 store 实例，因为实例的查找最终会找到全局 globalProperties 中的属性（globalProperties添加一个可以在应用的任何组件实例中访问的全局 property。组件的 property 在命名冲突具有优先权）。

provide/inject 在 Vuex 中的作用就是让组件可以访问到 store 实例。

响应式状态

state

在state中设置的属性是响应式的

使用：

// 设置state
const state = createStore({state: {value: 1}
})// 在组件上使用
const Com = {template: `<div>{{ $store.state.value }}</div>`,
}

TODO 在Store里会初始化一个ModuleCollection对象（详情请看下面的模块化部分），里边会对传入的state进行判断（函数或者对象）处理。

之后会在Store类中调用一个resetStoreState方法，将传入的state通过reactive方法设置成响应式。

export function resetStoreState (store, state, hot) {...store._state = reactive({data: state})...
}

getters

可以从 store 中的 state 中派生出一些状态。

// 设置state和getters
const store = new Vuex.Store({state: {value: 1,},getters: {getterVal(state, getters) {return state.value + 1;}}
})// 在组件上使用
const Com = {template: `<div>{{$store.getters.getterVal}}</div>`
}

也可以通过让getter返回一个函数来实现给getter传递参数。

// 设置state和getters
const store = new Vuex.Store({state: {value: 1,},getters: {getterVal(state, getters) {return function(num) {return state.val + num;};}}
})// 在组件上使用
const Com = {template: `<div>{{$store.getters.getterVal(3)}}</div>`
}

同时vuex内部对getter有进行缓存处理，只有当依赖的state发生改变后才会重新收集。

来看看vuex内部是如何实现getter的：

类Store中会调用installModule会对传入的模块进行处理（详情请看下面的模块化部分，里边会对模块里的getters处理）

// src/store-util.js
// 对所有模块中的getters进行处理
module.forEachGetter((getter, key) => {const namespacedType = namespace + keyregisterGetter(store, namespacedType, getter, local)
})function registerGetter (store, type, rawGetter, local) {// 去重处理if (store._wrappedGetters[type]) {if (__DEV__) {console.error(`[vuex] duplicate getter key: ${type}`)}return}// 往store实例的_wrappedGetters存储getters，这样就可以通过store.getters['xx/xxx']来访问store._wrappedGetters[type] = function wrappedGetter (store) {// 调用模块中设置的getter方法，可以看到这里是传入了4个参数return rawGetter(local.state, // local statelocal.getters, // local gettersstore.state, // root statestore.getters // root getters)}
}

在类Store中调用resetStoreState方法中对使用computed方法对getter进行计算后缓存。

export function resetStoreState (store, state, hot) {...const wrappedGetters = store._wrappedGettersconst scope = effectScope(true)scope.run(() => {forEachValue(wrappedGetters, (fn, key) => {computedObj[key] = partial(fn, store)computedCache[key] = computed(() => computedObj[key]())Object.defineProperty(store.getters, key, {get: () => computedCache[key].value,enumerable: true})})})...
}

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个事件类型 (type)和一个回调函数 (handler)。这个回调函数就是实际进行状态更改的地方。

const store = createStore({state: {value: 1},mutations: {increment (state, payload) {state.value++}}
})

在installModule方法中，对模块中的mutations进行注册，

// src/store-util.js
function registerMutation (store, type, handler, local) {const entry = store._mutations[type] || (store._mutations[type] = [])entry.push(function wrappedMutationHandler (payload) {handler.call(store, local.state, payload)})
}

把模块中的mutations全部添加到Store实例中的_mutations对象中，将mutations中的this指向Store实例，并传入两个参数:

state: 当前模块的state（具体详解请看模块化部分）
payload: 通过commit中传入的参数。

像上面的demo中_mutations值为{increment: [fn]}

commit触发mutation

语法：
commit(type: string, payload?: any, options?: Object)
commit(mutation: Object, options?: Object)

通过使用commit方法来触发对应的mutation

store.commit('increment');

commit可以接受额外的参数（payload）来为mutation传入参数。

const store = createStore({state: {value: 1},mutations: {increment (state, num) {state.value += num;}}
})store.commit('increment', 2);

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

在类Store中定义了commit方法，因为commit方法内部需要使用到Store实例中的方法，因此需要使用call方法把this指向Store实例。

// src/store.js
export class Store {constructor (options = {}) {this._mutations = Object.create(null)// 改变thisthis.commit = function boundCommit (type, payload, options) {return commit.call(store, type, payload, options)}...commit (_type, _payload, _options) {const {type,payload,options} = unifyObjectStyle(_type, _payload, _options)const mutation = { type, payload }const entry = this._mutations[type]...this._withCommit(() => {entry.forEach(function commitIterator (handler) {handler(payload)})})...}
}// src/store-util.js
export function unifyObjectStyle (type, payload, options) {if (isObject(type) && type.type) {options = payloadpayload = typetype = type.type}return { type, payload, options }
}

可以看到在处理传入commit的参数时Vuex进行了处理。可以往commit传入对象形式的配置。

const store = createStore({state: {value: 1},mutations: {increment (state, payload) {state.value += payload.value;}}
})
store.commit({type: 'increment',value: 1
})

mutation中必须是同步函数，如果mutation是一个异步函数，异步修改状态，虽然也会使状态正常更新，但是会导致开发者工具有时无法追踪到状态的变化，调试起来就会很困难。

订阅mutations

Vuex提供了subscribe方法用来订阅 store 的 mutation，当mutations执行完后就会触发订阅回调。

语法：subscribe(handler, options)

handler: 处理函数
options: 配置
- prepend: Boolean值，把处理函数添加到订阅函数链的最开始。

const store = createStore(...)// subscribe方法的返回值是一个取消订阅的函数
const unsubscribe = store.subscribe((mutation, state) => {console.log(mutation)
})
// 你可以调用 unsubscribe 来停止订阅。
// unsubscribe()const unsubscribe2 = store.subscribe((mutation, state) => {console.log('在订阅函数链头部，最先执行')
}, {prepend: true})

订阅的源码实现非常简单，使用一个数组来维护订阅函数。在触发commit方法内部添加执行订阅方法即可。

// src/store.js
export class Store {constructor (options = {}) {this._subscribers = [];...}commit() {...const mutation = { type, payload }// 执行mutationthis._withCommit(() => {entry.forEach(function commitIterator (handler) {handler(payload)})})// 在mutation执行完后执行订阅this._subscribers.slice().forEach(sub => sub(mutation, this.state))}subscribe (fn, options) {return genericSubscribe(fn, this._subscribers, options)}...
}// src/store-util.js
export function genericSubscribe (fn, subs, options) {if (subs.indexOf(fn) < 0) {// 如果传入了prepend: true 把处理函数添加到订阅函数链的最开始options && options.prepend? subs.unshift(fn): subs.push(fn)}// 返回一个取消订阅的方法return () => {const i = subs.indexOf(fn)if (i > -1) {subs.splice(i, 1)}}
}

Actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

const store = createStore({state: {value: 1},mutations: {increment (state, payload) {state.value += payload.value}},actions: {emitIncrement(context, payload) {context.commit('increment', payload);// action同样可以改变state中的数据，但是最好不要这样使用，在严格模式下控制台会抛异常且action是异步的，不方便DevTool 调试// context.state.value++;}},
})

在installModule方法中，对模块中的actions进行注册。跟mutations一样的是也是也把所有的action方法放在一个变量_actions下，同时this也指向Store实例，并传入两个参数:

context: 当前模块的上下文（具体详解请看模块化部分）
payload: 通过dispatch中传入的参数。
TODO action.handler怎么传值

module.forEachAction((action, key) => {const type = action.root ? key : namespace + keyconst handler = action.handler || actionregisterAction(store, type, handler, local)
})function registerAction (store, type, handler, local) {const entry = store._actions[type] || (store._actions[type] = [])entry.push(function wrappedActionHandler (payload) {let res = handler.call(store, {dispatch: local.dispatch,commit: local.commit,getters: local.getters,state: local.state,rootGetters: store.getters,rootState: store.state}, payload)// 强行转化为promise，在dispatch就可以统一处理if (!isPromise(res)) {res = Promise.resolve(res)}...return res})
}

值得注意的是在action执行完后是返回一个Promise格式的值。详细看下面的dispatch部分。

dipatch分发actions

语法：
dispatch(type: string, payload?: any, options?: Object): Promise<any>
dispatch(action: Object, options?: Object): Promise<any>

store.dispatch('emitIncrement', {value: 1})
// 对象形式
store.dispatch({type: 'emitIncrement',value: 1
})

通过使用dispatch方法来触发对应的action

// src/store.js
export class Store {dispatch (_type, _payload) {// 跟mutations一样处理传入对象的形式const {type,payload} = unifyObjectStyle(_type, _payload)const action = { type, payload }const entry = this._actions[type]...const result = entry.length > 1? Promise.all(entry.map(handler => handler(payload))): entry[0](payload)...}
}

可以看到在执行action时如果对应的action数组中存在多个，用了Promise.all来处理，这是为了当type对应的所有的action都执行完后才继续执行这样才能保证订阅是在action执行之后触发。

TODO 多个mutation和action是什么情况？

订阅actions

跟mutation一样，action也可以添加订阅

语法：subscribeAction(handler: Function, options?: Object): Function

返回值也是一个取消订阅方法。

handler: 处理函数
options: 配置
- before: 在action执行前触发（默认）
- after: 在action执行后触发
- error: 捕获分发 action 的时候被抛出的错误
- prepend: Boolean值，把处理函数添加到订阅函数链的最开始。

相比起mutation的订阅，action的订阅较为复杂一点。

store.subscribeAction((action, state) => {console.log(action)
})store.subscribeAction((action, state) => {console.log('在订阅函数链头部，最先执行')
}, {prepend: true})store.subscribeAction({before: (action, state) => {console.log(`before action`)},after: (action, state) => {console.log(`after action`)},error: (action, state, error) => {console.log(`error action`)console.error(error)}
})

来看看订阅action的添加和触发相关的实现原理：

export class Store {subscribeAction (fn, options) {// 当传入的第一个参数为函数时，封装成{before:fn}的形式const subs = typeof fn === 'function' ? { before: fn } : fn// 把订阅方法放入_actionSubscribers数组中return genericSubscribe(subs, this._actionSubscribers, options)}dispatch (_type, _payload) {const action = { type, payload }const entry = this._actions[type]...// 执行before相关订阅try {this._actionSubscribers.slice().filter(sub => sub.before).forEach(sub => sub.before(action, this.state))}...const result = entry.length > 1? Promise.all(entry.map(handler => handler(payload))): entry[0](payload)// 返回一个promisereturn new Promise((resolve, reject) => {// 对于同步函数而已，因此在注册阶段就直接使用Promise.resolve处理能异步函数了，所以统一使用then获取执行结果result.then(res => {try {// 执行after订阅者this._actionSubscribers.filter(sub => sub.after).forEach(sub => sub.after(action, this.state))}...resolve(res)}, error => {try {// 执行error订阅者this._actionSubscribers.filter(sub => sub.error).forEach(sub => sub.error(action, this.state, error))}...reject(error)})})}
}

模块化

如果只使用单一状态树，应用的所有状态就会集中到一个比较大的对象，store 对象就有可能变得相当臃肿。Vuex 可以允许将 store 分割成模块（module）。每个模块甚至是嵌套子模块拥有 state、getters等。

例如

const nestedModule = {namespaced: true,state: {a: 1},getters: {},mutations: {},actions: {},
}
const module = {state: {},getters: {},mutations: {},actions: {},modules: {nested: nestedModule}
}
const store = createStore(module);
store.state.nested  // {a: 1} 获取嵌套module的状态

模块解析

在Vuex实例创建时，会对传入的模块进行解析

export class Store {constructor(options) {this._modules = new ModuleCollection(options)installModule(this, state, [], this._modules.root)}
}

初始化ModuleCollection时会对模块进行注册：

// src/module/module-collection.js
export default class ModuleCollection {constructor (rawRootModule) {this.register([], rawRootModule, false)}register (path, rawModule, runtime = true) {// 将每个模块使用一个module对象来展示const newModule = new Module(rawModule, runtime)if (path.length === 0) {this.root = newModule} else {// 将嵌套模块添加到父模块的_children属性中const parent = this.get(path.slice(0, -1))parent.addChild(path[path.length - 1], newModule)}// 注册嵌套模块if (rawModule.modules) {forEachValue(rawModule.modules, (rawChildModule, key) => {this.register(path.concat(key), rawChildModule, runtime)})}}
}

最后形成一个便于Vuex处理的对象：

this._modules = {root: {runtime: Boolean,state: {},_children: [],_rawModule: {},namespaced: Boolean}
}

installModule方法非常重要，里边会对嵌套module进行解析，使得嵌套内部可以在调用dispatch、commit的时候能找到对应的action和mutation。

// src/store-utils.js installModule
const isRoot = !path.length
const namespace = store._modules.getNamespace(path)if (!isRoot && !hot) {const parentState = getNestedState(rootState, path.slice(0, -1))const moduleName = path[path.length - 1]store._withCommit(() => {...// 将子模块的state添加到父模块的state中parentState[moduleName] = module.state})
}

namespaced的作用：
在子模块中添加namespaced: true，根模块的会根据模块的modules字段中的key作为索引将子模块中mutations、actions、getters存储在根模块中。例如：
mutations: {'childModule/module1', [fn]}
在调用commit或者dispatch方法的时候就可以根据这个key找到对应子模块中的mutation跟action
如果子模块中没有设置namespaced: true，那么在根模块中的_actions等字段的key就为对应的子模块中的actions里定义的key，如果模块非常多的时候，容易造成命名冲突。而vuex也考虑到这种情况，因此key对应的值的类型为数组，这样即使冲突了，也会执行数组中所有的方法，不过这样就会导致触发其他模块中非必要的action、mutation等。
// 如两个子模块都存在一个increment的mutation，同时都没有设置 namespaced: true，那么在根模块的_mutations就为
_mutations: { 'increment', [fn1, fn2] }
// 调用 store.commit('increment')，fn1, fn2都会执行

将子模块的state添加到父模块的state中，这样就可以通过store.state.childModule.state.xxx进行访问。

为模块创建了一个执行上下文，当触发commit或者dispatch时就会根据namespaced找到对应的模块中的mutations或者actions中的方法。

// src/store-utils.js installModule
// 为当前模块添加一个上下文
const local = module.context = makeLocalContext(store, namespace, path)module.forEachMutation((mutation, key) => {const namespacedType = namespace + keyregisterMutation(store, namespacedType, mutation, local)
})// src/store-utils.js
function makeLocalContext (store, namespace, path) {const noNamespace = namespace === ''const local = {dispatch: noNamespace ? store.dispatch : (_type, _payload, _options) => {...if (!options || !options.root) {type = namespace + type...}return store.dispatch(type, payload)},// commit 类似}...return local
}

一篇文章让你彻底了解vuex的使用及原理（上）

vuex详解

vuex的使用

响应式状态

state

getters

Mutations

commit触发mutation

订阅mutations

Actions

dipatch分发actions

订阅actions

模块化

模块解析

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签

一篇文章让你彻底了解vuex的使用及原理（上）

vuex详解

vuex的使用

响应式状态

state

getters

Mutations

commit触发mutation

订阅mutations

Actions

dipatch分发actions

订阅actions

模块化

模块解析

相关问题

公告

DeepSeek全套部署资料免费下载

免费可商用字体批量下载

标签