说明
以下内容均是以 Vuex 2.0.0 版本展开分析。
此篇文章,是自己对 Vuex 实现分析的记录性文章,如有任何错误,欢迎指正交流。
Vuex 示意图
在说之前先来看一张官方文档提供的一张图
首先组件渲染依赖了部分全局的 State 内部预先定义的属性。
组件内部需要更新之前依赖的 State 内部属性,则需要调度(Dispatch)触发 Action 响应状态变化(也可直接提交 mutation)。
响应状态变化函数内部必须提交 mutation 去更改状态(类似发事件)。
State 内部属性的更改,触发依赖其属性的组件重新渲染。
基础示例剖析
了解了大致流程,接下来我们就以基础示例入手,剖析其实现了哪些功能,根据其实现的功能逐步去捋清其代码实现
import Vue from ‘vue’
import Vuex from ‘vuex’
// 注册插件
Vue.use(Vuex)
// 根状态对象。每个Vuex实例只是一个状态树。
const state = { count: 0 }
// mutations 实际上是改变状态的操作。每个 mutation 处理程序都将整个状态树作为第一个参数,然后是附加的有效负载参数。
// mutations 必须是同步的,并且可以通过插件记录下来,以便调试。
const mutations = {
increment (state) {
state.count++
},
decrement (state) {
state.count–
}
}
// actions 是导致副作用并可能涉及异步操作的函数。
const actions = {
increment: ({ commit }) => commit(‘increment’),
decrement: ({ commit }) => commit(‘decrement’),
incrementIfOdd ({ commit, state }) {
if ((state.count + 1) % 2 === 0) {
commit(‘increment’)
}
},
incrementAsync ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit(‘increment’)
resolve()
}, 1000)
})
}
}
// getters are functions
const getters = {
evenOrOdd: state => state.count % 2 === 0 ? ‘even’ : ‘odd’
}
// 模块
const moduleDemo = {
state: { moduleCount: 1 },
mutations: {
// state: 模块的局部状态对象。
moduleIncrement(state) {
state.moduleCount++
},
},
actions: {
moduleIncrement: ({ commit }) => commit(‘moduleIncrement’),
},
getters: {
moduleCountPlus: ({ moduleCount }) => moduleCount++
}
}
// Vuex实例是通过组合 state、 mutations 、actions 和 getter 创建的。
const store = new Vuex.Store({
state,
getters,
actions,
mutations,
modules: {
moduleDemo
},
})
new Vue({
el: ‘#app’,
store
})
复制代码
根据上述基础使用,我们大概可以梳理出以下几点:
注册插件。
定义 store 所需配置参数。
实例化 Store 类.
实例化 Vue 并传入 store。
在看具体的代码实现之前,我们大致的先了解一下整个 Vuex 入口文件内的大致内容:
import devtoolPlugin from ‘./plugins/devtool’
import applyMixin from ‘./mixin’
import { mapState, mapMutations, mapGetters, mapActions } from ‘./helpers’
import { isObject, isPromise, assert } from ‘./util’
let Vue // 绑定安装
// Store 全局单例模式管理
class Store { … }
// 更新模块
function updateModule(targetModule, newModule) { … }
// 重置 Store
function resetStore(store) { … }
// 重置 Store 上 Vue 实例
function resetStoreVM(store, state) { … }
// 安装模块
function installModule(store, rootState, path, module, hot) { … }
// 注册 mutations 构造器选项
function registerMutation(store, type, handler, path = []) { … }
// 注册 action
function registerAction(store, type, handler, path = []) { … }
// 包装 getters
function wrapGetters(store, moduleGetters, modulePath) { … }
// 启用严格模式
function enableStrictMode(store) {}
// 获取嵌套的状态
function getNestedState(state, path) {}
// 插件注册方法
function install(_Vue) {}
// 自动注册插件
if (typeof window !== ‘undefined’ && window.Vue) {
install(window.Vue)
}
export default {
Store,
install,
mapState,
mapMutations,
mapGetters,
mapActions
}
复制代码在了解了其内部构造,我们就根据上述梳理,逐点分析其实现。
注册插件
我们知道,Vue 的插件都需要给 Vue 提供一个注册钩子函数 installl, 执行 Vue.use(Vuex) 实际内部走的是 install 函数的内部调用。
install
// 插件注册:vue 内部在调用会把 Vue 透传过来
function install(_Vue) {
// 避免重复注册
if (Vue) {
console.error(
‘[vuex] already installed. Vue.use(Vuex) should be called only once.’
)
return
}
// 绑定安装
Vue = _Vue
// 应用全局 Vue.mixins
applyMixin(Vue)
}
// 自动注册机制
if (typeof window !== ‘undefined’ && window.Vue) {
install(window.Vue)
}
复制代码applyMixin
export default function (Vue) {
// 获取 Vue 版本号
const version = Number(Vue.version.split(’.’)[0])
// 版本号为 2.x
if (version >= 2) {
// 若存在 init 钩子则把 VuexInit 混入 初始化阶段
// 其它混入 beforeCreate 阶段
const usesInit = Vue.config._lifecycleHooks.indexOf(‘init’) > -1
Vue.mixin(usesInit ? { i