深入 vuex 探求本源，今天你学废了吗 ？
前言
作为当代码农大家肯定在项目中经历过多组件共享同一份数据的情况，一般这种时候大家首先想到的就是 vux。
随着组件的增多，数据共享的问题随之而来， vux 不仅可以让你更方便地管理项目中的数据状态，还可以让你更好地跟踪状态变化。因此，作为前端程序猿，熟练掌握 vux 是非常重要的，今天就一起来看看 vuex 的实现吧！
vux 的源码设计非常精简，结构清晰、且易于理解，其中的设计思路也非常值得我们去探究。
前置内容：
在开始正文之前先来看几个知识点
0. 生命周期
Vue 中父子组件生命周期的执行顺序
父组件 beforeCreate ==>> 父组件 created ==>> 父组件 beforeMount
子组件 beforeCreate => 子组件 created =>子组件 beforeMount =>子组件 mounted
父组件 mounted
1. 设计模式
我们先来看一下几种常见的设计模式：
- 发布订阅模式：发布订阅是一种消息范式，它定义了一种一对多的依赖关系，让多个观察者同时监听某个对象。当对象状态发生变化时，会通知所有观察者，使它们能够自动更新自己。
- 发布订阅模式常用于异步编程，以解决异步操作之间的耦合关系。
- 发布订阅的实现：vue.js 中的EventBus、Redux 中间件、jQuery 的自定义事件以及 Node.js 中的 EventEmitter
- 观察者模式：观察者模式也是一种消息范式，与发布订阅模式类似支持一对多的依赖关系，当对象状态发生变化时，会通知所有观察者，使它们能够自动更新。
- 但与发布订阅模式不同的是，观察者模式通常是同步的。
- JavaScript 中的事件监听器、Vue.js 中的 watcher、AngularJS 中的 $watch、React 中的 useEffect
- 单例模式：单例模式是一种创建型设计模式，它保证一个类只有一个实例，必须自行创建这个实例，并提供一个全局访问点。
- 单例模式通常用于控制某些资源的访问权限，例如数据库连接池、线程池等。
- 单例模式的实现如 Vue.js 插件、ES6 类和静态方法、js 中的对象字面量及模块模式
2.插件 plugin
什么是插件？
插件主要用于拓展 vue 的功能，增强 vue 的技术栈 插件的功能范围没有严格的限制——一般有下面几种：
- 添加全局方法或者属性。如: vue-custom-element
- 添加全局资源：指令/过滤器/过渡等。如 vue-touch
- 通过全局混入来添加一些组件选项。如 vue-router
- 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
- 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router
插件的编写方式
vue 插件的实现需要暴露一个 install 方法。 这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或 property
Vue.myGlobalMethod = function () {
// 逻辑...
}
// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})
// 3. 注入组件选项， 混入 vue 的生命周期钩子
Vue.mixin({
created: function () {
// 逻辑...
}
...
})
// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}
插件的使用
在 Vue 项目中，我们可以通过 Vue.use(plugin) 方法来注册插件。
注册插件时，Vue.js 会自动调用插件的 install 方法，从而完成插件的安装和初始化。
- 如果插件是一个对象，必须提供 install 方法。
- 如果插件是一个函数，它会被作为 install 方法。
调用install方法时，会将 Vue 作为参数传入，install 方法被多次调用时，插件也只会被安装一次。
注册插件，此时只需要调用 install 方法并将 Vue 作为参数传入即可。
但在细节上有两部分逻辑要处理： 1、插件的类型：可以是 install 方法，也可以是一个包含 install 方法的对象。 2、插件只能被安装一次，保证插件列表中不能有重复的插件。
Vue.use = function(plugin){
const installedPlugins = (this._installedPlugins || (this._installedPlugins = []));
if(installedPlugins.indexOf(plugin)>-1){
return this;
}
<!-- 其他参数 -->
const args = toArray(arguments,1);
args.unshift(this);
if(typeof plugin.install === 'function'){
plugin.install.apply(plugin,args);
}else if(typeof plugin === 'function'){
plugin.apply(null,plugin,args);
}
installedPlugins.push(plugin);
return this;
}
1、在 Vue.js 上新增了 use 方 法，并接收一个参数 plugin。
2、首先判断插件是不是已经被注册过，如果被注册过，则直接终止方法执行，避免重复安装。
3、通过 toArray 将伪数组转为数组。使用 toArray 方法得到arguments。除了第一个参数之外，剩余的所有参数将得到的列表赋值给 args，然后将 Vue 添加到 args 列表的最前面。这样做的目的是保证 install 方法执行时第一个参数是 Vue，其余参数是注册插件时传入的参数。
4、由于 plugin 参数支持对象和函数类型，所以通过判断 plugin.install 和 plugin 哪个是函数，即可知用户注册插件的方式，然后执行用户编写的插件并将 args 作为参数传入。
5、最后，它会将已经安装的插件保存到 this._installedPlugins 数组中，并返回 Vue 实例本身。
vuex 的基本使用
在了解这些内容之后终于要开始介绍今天的主角啦，是不是已经迫不及待了呢 😉，先热个身熟悉一下 vuex 的使用吧
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。集中式储存管理应用的所有组件状态，用于解决项目中组件间大量数据共享的问题。
- 每一个 Vuex 应用的核心就是 store，实现了单向数据流
- 在全局拥有一个state 存放数据，以一个单例模式存在
- Vuex 的状态存储是响应式的，当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化时，相应的组件也会高效的更新，vuex 将 state 和 getters 映射到各个组件实例中响应式更新状态
- 唯一修改 store 中状态的方式是 提交(commit) mutation
Vuex 通过 Vue 的插件系统将 store 实例从根组件中“注入”到所有的子组件里。且子组件能通过 this.$store 访问到。
核心概念
- state： 储存单一状态，基本数据。
- getters: store 的计算属性，对state的加工，是派生出来的数据。getter返回的值会根据它的依赖被缓存起来，只有当它的依赖值发生改变才会被重新计算。
- mutations： 提交更改数据， store.commit 是唯一触发mutations 的方式，通过 commit 更改 state 存储的状态（mutations同步函数）。
- actions：提交mutation，不是直接变更状态（actions可以包含任何异步操作），store.dispatch 是唯一能触发action的方式。
- module： store分隔的模块，每个模块都有自己的state、getters、mutations、actions。
- 辅助函数： vuex 提供mapSate、mapGetters、mapActions、mapMutation 等辅助函数给开发在 vm 中处理store。
state、mapState
由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回状态：
// 创建一个 Counter 组件
const Counter = {
template: `<div>{{ count }}</div>`,
computed: {
count () {
return this.$store.state.count
}
}
}
每当 store.state.count 变化的时候, 都会重新求取计算属性，并且触发更新相关联的 DOM。
mapState mapState 辅助函数帮助我们对store中的属性进行加工生成计算属性，并以对象的形式返回
import { mapState } from 'vuex'
export default {
// mapState 返回的是一个对象
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态，必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。
computed: mapState([
// 映射 this.count 为 store.state.count
'count'
])
通过对象展开运算符 将对象中的属性展开
computed: {
...mapState(['count'])
}
getter、mapGetter
对state中的属性进行加工，派生出新的数据。 gatter 借助vue的计算属性 computed 实现数据实时监听， getter 返回的值会根据它的依赖被缓存起来，只有当它的依赖值发生改变才会被重新计算。
注意 从 Vue 3.0 开始，getter 的结果不再像计算属性一样会被缓存起来。这是一个已知的问题，将会在 3.1 版本中修复。详情请看 PR #1878。
通过 getter 处理 store 中的数据并直接获取处理结果
const store = createStore({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos (state) {
return state.todos.filter(todo => todo.done)
}
// 通过属性访问
doneTodosCount (state, getters) {
return getters.doneTodos.length
}
// 通过函数访问 并传参
getTodoById: (state) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
})
通过属性、函数访问 getter 会暴露为 store.getters 对象，以属性的形式访问这些值， getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。
computed: {
doneTodosCount () {
return this.$store.getters.doneTodosCount
}
getTodoById: (state) => (id) => {
return store.getters.getTodoById(2)
}
}
mapGetter 将 store 中的 getter 映射到局部计算属性中：
import { mapGetters } from 'vuex'
export default {
// ...
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters([
'doneTodosCount',
// 使用对象形式 将一个 getter 属性另取一个名字
getId: 'getTodoById'
// ...
])
}
}
mutation
在vuex 中更改能修改状态的唯一方法是提交 mutation。
// store 中
mutations: {
increment (state, payload) {
state.count += payload.amount
}
}
// commit 提交方式
// commit 方式一
// payload (载荷) commit 传入的参数， 绝大多数情况下载荷是一个对象
store.commit('increment', {
amount: 10
})
// commit 方式二
store.commit({
type: 'increment',
amount: 10
})
可以使用常量替代 mutation 事件类型
mutations: {
SET_INFO: (state, info) => {
state.userInfo = info || null
},
}
且 Mutation 必须是同步的 因为在使用devtools调试的时触发异步的 mutation 时候，回调函数还没有被调用，无法对状态进行精准的追踪 无法对异步的操作进行精准的调试和跟踪状态更改信息。
action
- 用于提交 mutation，并不能直接变更store的状态
- action 中可以包含异步操作
- action 通过 dispatch 触发
const store = createStore({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
},
decrease(state){
state.count--
}
},
actions: {
increment (context) {
// context 具有与 store 实例相同的方法和属性
context.commit('increment')
}
// 从context 中解构出 state、commit方法
decrease ({ state, commit }) {
commit('decrease')
}
}
})
action 函数接受一个与 store 实例具有相同方法和属性的 context 对象 因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
actions 中使用异步操作
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
组合 action
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise 所以支持对 dispatch 进行 .then 的链式操作
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
},
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
},
// 使用 async / await 组合使用
async actionC ({ dispatch, commit }) {
await dispatch('actionA') // 等待 actionA 完成
commit('gotOtherData', await getOtherData())
}
}
// dispatch 能处理 actionA 回返回的 promise， 同时返回一个 promise
store.dispatch('actionA').then(() => {
// ...
})
一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。
module 模块化
Vuex 允许我们将 store 分割成模块(module)，每个模块拥有自己的 state、mutation、action、getter 甚至能嵌套子模块
module 模块化的使用
- Vuex使用方法： 开始 ----> 安装Vuex----> 实例化 Vuex.Store----> 注入 store，挂载 Vue 实例
import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
export default new Vuex.Store({
strict: process.env.VUE_APP_ENV !== 'production',
modules: {
// 引入 user 模块
user,
},
getters,
})
- main 中引入 store
import store from './store'
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
- 用 getter 将 store 中的 state 进行计算或者筛选，并返回一个新值
const getters = {
userInfo: state => state.user.userInfo,
menuList: state => state.user.menuList,
menuMap: state => state.user.menuMap,
btnCtl: state => state.user.btnCtl,
}
export default getters
- user 模块
import { getUserInfoApi, getAllMenuApi, getCollectionMenuApi, getAllCurrencyApi } from 'src/api/common'
export default {
namespaced: true,
state: {
userInfo: null,
menuMap: null,
menuList: null,
btnCtl: null,
},
mutations: {
SET_INFO: (state, info) => {
state.userInfo = info || null
},
SET_USER_MENU_LIST: (state, data) => {
state.menuList = data
},
SET_USER_MENU_MAP: (state, data) => {
state.menuMap = data
},
SET_USER_BUTTON_CONTROL: (state, data) => {
state.btnCtl = data || null
},
},
actions: {
async getUserInfo ({ state, commit }) {
try {
let userInfo = null
let navList = null
// 处理菜单和按钮权限
...
// 设置菜单权限及按钮权限到vuex
commit('SET_USER_MENU_LIST', navList)
commit('SET_USER_BUTTON_CONTROL', buttonControlObj)
// 获取导航
...
commit('SET_USER_MENU_MAP', getMap(navList))
} catch (e) {
return Promise.reject(e)
}
},
},
}
- 触发 vuex 状态变更
import store from 'src/store'
// 触发时要从模块出发，触发模块下的action
await store.dispatch('user/getUserInfo')
store.commit('common/SET_BREAD_NAV', [])
- 获取 vuex 中的数据
import { mapGetters } from 'vuex'
export default{
computed:{
...mapGetters(['userInfo','menuMap','menuList'])
}
}
vuex实现原理
Vuex 通过插件实现功能的注入，而 vuex 的本质是一个对象，其中包含了两个属性，一个 install 方法，以及 Store 类：
- Vuex 对象中暴露了一个 install 方法，该方法接收 Vue 构造函数作为参数，用于在 Vue 中注册 Vuex 插件。
- 暴露的 Store 类是 Vuex 的核心，它封装了 state、mutations、actions、getters 等核心概念，并提供了一些 API 供开发者使用。
install
install方法的作用是将store这个实例挂载到所有的组件上，注意是同一个store实例。
/*暴露给外部的插件install方法，供Vue.use调用安装插件*/
export function install (_Vue) {
if (Vue) {
/*避免重复安装（Vue.use内部也会检测一次是否重复安装同一个插件）*/
if (process.env.NODE_ENV !== 'production') {
console.error(
'[vuex] already installed. Vue.use(Vuex) should be called only once.'
)
}
return
}
/*保存Vue，同时用于检测是否重复安装*/
Vue = _Vue
/*将vuexInit混淆进Vue的beforeCreate(Vue2.0)或_init方法(Vue1.0)*/
applyMixin(Vue)
}
install 中主要做了两件事
- 防止 vuex 被重复安装
- 执行 applyMixin，将 vuexInit 混入到每个组件的 beforeCreate 钩子中，为组件添加了$store属性
applyMixin
引入的 applyMixin
export default function (Vue) {
/*获取Vue版本，鉴别Vue1.0还是Vue2.0*/
const version = Number(Vue.version.split('.')[0])
if (version >= 2) {
/*通过mixin将vuexInit混入Vue实例的beforeCreate钩子中*/
Vue.mixin({ beforeCreate: vuexInit })
} else {
// override init and inject vuex init procedure
// for 1.x backwards compatibility.
/*将vuexInit放入_init中调用*/
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钩子，会存入每一个Vue实例等钩子列表*/
function vuexInit () {
const options = this.$options
// store injection
if (options.store) {
/*存在store其实代表的就是Root节点，直接执行store（function时）或者使用store（非function）*/
this.$store = typeof options.store === 'function'
? options.store()
: options.store
} else if (options.parent && options.parent.$store) {
/*子组件直接从父组件中获取$store，这样就保证了所有组件都公用了全局的同一份store*/
this.$store = options.parent.$store
}
}
}
mixin 文件是为了将 vuexInit 方法 混入到 beforeCreate 钩子中，
vuexInit() 在组件实例创建时被调用，将 store 注入到组件实例中，并注册一个 $store 属性，以便组件可以访问 store 中的状态和方法。
vueInit 主要为了在数据初始化阶段为每个组件上都挂载一个$store 属性，同时确保所有组件都使用同一份 $store （全局只有一个 $Store 实例==>单例模式）
- 存在store其实代表的就是Root节点，直接执行store
- 否则找到根实例并设置 store，
确保所有的组件都获取到了同一份内存地址的Store实例
Store
Store 最终会在 vue 项目中使用时被实例化，将 vuex 混入 vue 生命周期后，每个 vue 中挂载了 Store 类
// 调用 Vue.use 安装插件
Vue.use(Vuex)
export default new Vuex.Store({
strict: process.env.VUE_APP_ENV !== 'production',
modules: {
user,
common,
msg,
store,
},
getters,
})
Store 这个类拥有 commit，dispatch 等方法，Store 类里将用户传入的 state 包装成 data，作为 new Vue 的参数，从而实现了state 值的响应式。
constructor (options = {}) {
/*
在浏览器环境下，如果插件还未安装（!Vue即判断是否未安装），则它会自动安装。
它允许用户在某些情况下避免自动安装。
*/
if (!Vue && typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
if (process.env.NODE_ENV !== 'production') {
assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
assert(this instanceof Store, `Store must be called with the new operator.`)
}
const {
/*一个数组，包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数，可以监听 mutation（用于外部地数据持久化、记录或调试）或者提交 mutation （用于内部数据，例如 websocket 或 某些观察者）*/
plugins = [],
/*使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误。*/
strict = false
} = options
/*从option中取出state，如果state是function则执行，最终得到一个对象*/
let {
state = {}
} = options
if (typeof state === 'function') {
state = state()
}
// store internal state
/* 用来判断严格模式下是否是用mutation修改state的 */
this._committing = false
/* 存放action */
this._actions = Object.create(null)
/* 存放mutation */
this._mutations = Object.create(null)
/* 存放getter */
this._wrappedGetters = Object.create(null)
/* module收集器 */
this._modules = new ModuleCollection(options)
/* 根据namespace存放module */
this._modulesNamespaceMap = Object.create(null)
/* 存放订阅者 */
this._subscribers = []
/* 用以实现Watch的Vue实例 */
this._watcherVM = new Vue()
// bind commit and dispatch to self
/*将dispatch与commit调用的this绑定为store对象本身，否则在组件内部this.dispatch时的this会指向组件的vm*/
const store = this
const { dispatch, commit } = this
/* 为dispatch与commit绑定this（Store实例本身） */
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)
}
/*严格模式(使 Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误)*/
this.strict = strict
/*初始化根module，这也同时递归注册了所有子modle，收集所有module的getter到_wrappedGetters中去，this._modules.root代表根module才独有保存的Module对象*/
installModule(this, state, [], this._modules.root)
/* 通过vm重设store，新建Vue对象使用Vue内部的响应式实现注册state以及computed */
resetStoreVM(this, state)
/* 调用插件 */
plugins.forEach(plugin => plugin(this))
/* devtool插件 */
if (Vue.config.devtools) {
devtoolPlugin(this)
}
}
在构造函数中主要初始化 store 内部变量，执行 installModule 初始化 module 及 resetStoreVM 通过 VM实现 store 的响应式
installModule
installModule 是 vuex 内部的一个方法，用于安装模块到 store 中。
在 vuex 中，模块是指包含 state、mutations、actions、getters 等属性的对象，它可以嵌套，从而形成一个树形结构的模块树。vuex 通过 installModule 方法将这些模块安装到 store 中，使其可以被组件访问。
/*初始化module*/
function installModule (store, rootState, path, module, hot) {
/* 是否是根module */
const isRoot = !path.length
/* 获取module的namespace */
const namespace = store._modules.getNamespace(path)
/* 如果有namespace则在_modulesNamespaceMap中注册 */
if (module.namespaced) {
store._modulesNamespaceMap[namespace] = module
}
// set state
if (!isRoot && !hot) {
/* 获取父级的state */
const parentState = getNestedState(rootState, path.slice(0, -1))
/* module的name */
const moduleName = path[path.length - 1]
store._withCommit(() => {
/* 将子module设置称响应式的 */
Vue.set(parentState, moduleName, module.state)
})
}
const local = module.context = makeLocalContext(store, namespace, path)
/* 遍历注册mutation */
module.forEachMutation((mutation, key) => {
const namespacedType = namespace + key
registerMutation(store, namespacedType, mutation, local)
})
/* 遍历注册action */
module.forEachAction((action, key) => {
const namespacedType = namespace + key
registerAction(store, namespacedType, action, local)
})
/* 遍历注册getter */
module.forEachGetter((getter, key) => {
const namespacedType = namespace + key
// 收集 所有module上的getter 到 wrappedGetters 上
registerGetter(store, namespacedType, getter, local)
})
/* 递归安装mudule */
module.forEachChild((child, key) => {
installModule(store, rootState, path.concat(key), child, hot)
})
}
遍历各个 module 为每个模块加上 namespace，注册各模块中的 mutation、action、getter ，递归安装各个子模块。
resetStoreVM： 实现 store 的响应式更新
resetStoreVM 主要用于实现 Store 中数据的响应式： 在 vuex 中新建 Vue 对象使用 Vue 内部的响应式实现注册 state 以及 getter
通过将 store.state 和 store.getters 注册为 Vue 实例的响应式属性从而实现 store 中数据与视图的同步更新。
/* 通过vm重设store，新建Vue对象使用Vue内部的响应式实现注册state以及computed */
function resetStoreVM (store, state, hot) {
/* 存放之前的vm对象 */
const oldVm = store._vm
// bind store public getters
store.getters = {}
const wrappedGetters = store._wrappedGetters
const computed = {}
/* 通过Object.defineProperty为每一个getter方法设置get方法，
比如获取this.$store.getters.test的时候获取的是store._vm.test，也就是Vue对象的computed属性 */
forEachValue(wrappedGetters, (fn, key) => {
给 computed 对象添加属性
computed[key] = () => fn(store)
// 为每一个getter方法设置get方法
Object.defineProperty(store.getters, key, {
get: () => store._vm[key],
enumerable: true // for local getters
})
})
const silent = Vue.config.silent
/* Vue.config.silent 暂时设置为true的目的是在new一个Vue实例的过程中不会报出一切警告 */
Vue.config.silent = true
/* 这里new了一个Vue对象，运用Vue内部的响应式实现注册state以及computed*/
store._vm = new Vue({
data: {
$$state: state
},
computed
})
Vue.config.silent = silent
/* 使用严格模式，保证修改store只能通过 commit */
if (store.strict) {
enableStrictMode(store)
}
if (oldVm) {
/* 解除旧vm的state的引用，以及销毁旧的Vue对象 */
if (hot) {
store._withCommit(() => {
oldVm._data.$$state = null
})
}
Vue.nextTick(() => oldVm.$destroy())
}
}
vuex 的中 state 的响应式是借助 vue 实现的：
- 将 state 存入vue 实例组件的 data 中实现 state 数据的响应式
- getters 则是借助 vue 的计算属性 computed 实现数据实时监听
computed计算属性监听data数据变更主要经历以下几个过程：
严格模式
store 中的 strict 表示开启严格模式，在该模式下store 的所有修改只能通过 commit mutation 去实现，否则会报错。
/* 使能严格模式 */
function enableStrictMode (store) {
// 严格模式下 用
store._vm.$watch(function () { return this._data.$$state }, () => {
if (process.env.NODE_ENV !== 'production') {
/* 检测store中的_committing的值，如果是true代表不是通过mutation的方法修改的 */
assert(store._committing, `Do not mutate vuex store state outside mutation handlers.`)
}
}, { deep: true, sync: true })
}
// 断言 assert
export function assert (condition, msg) {
if (!condition) throw new Error(`[vuex] ${msg}`)
}
commit(mutation)
/* 调用mutation的commit方法 */
commit (_type, _payload, _options) {
// check object-style commit
/* 校验参数 */
const {
type,
payload,
options
} = unifyObjectStyle(_type, _payload, _options)
const mutation = { type, payload }
/* 取出type对应的mutation的方法 */
const entry = this._mutations[type]
if (!entry) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown mutation type: ${type}`)
}
return
}
/* 执行mutation中的所有方法，保证是通过提交 mutation 修改 store 数据*/
this._withCommit(() => {
entry.forEach(function commitIterator (handler) {
handler(payload)
})
})
/* 通知所有订阅者 */
this._subscribers.forEach(sub => sub(mutation, this.state))
if (
process.env.NODE_ENV !== 'production' &&
options && options.silent
) {
console.warn(
`[vuex] mutation type: ${type}. Silent option has been removed. ` +
'Use the filter functionality in the vue-devtools'
)
}
}
commit 方法会根据 type 找到并调用 _mutations 中对应的 mutation 方法，所以当没有 namespace 时，commit() 会触发所有 module 中的 mutation()。再执行完所有的 mutation 之后会执行_subscribers 中的所有订阅者。
另外，Store 还给外部提供了一个 subscribe 方法，用于注册一个订阅函数。当我们调用 subscribe 方法时，该订阅函数会被 push 到 Store 实例的 _subscribers 中，同时返回一个从 _subscribers 中注销该订阅者的方法。
这样，我们就可以在 Store 中注册一个订阅函数，并在 Store 的状态发生变化时得到通知。
/* 保证通过mutation修改store的数据 */
_withCommit (fn) {
/* 调用withCommit修改state的值时会将store的committing值置为true，内部会有断言检查该值，在严格模式下只允许使用mutation来修改store中的值，而不允许直接修改store的数值 */
const committing = this._committing
this._committing = true
fn()
this._committing = committing
}
在调用 commit(mutation) 修改 state 数据的时候，会在调用 mutation 方法之前将 committing 设置为 true，接下来再通过 mutation 修改 state 中的数据，
这时触发 $watch 中的回调断言 committing 是不会抛出异常的(此时 committing 为true)。
而当我们直接修改 state 的数据时，触发 $watch 这时的 committing 为 false，所以会抛出异常。
这就是 vuex 的严格模式的实现。
dispatch(action）
首先遍历各个模块注册 action
/* 遍历注册action */
function registerAction (store, type, handler, local) {
/* 取出type对应的action */
const entry = store._actions[type] || (store._actions[type] = [])
entry.push(function wrappedActionHandler (payload, cb) {
let res = handler.call(store, {
dispatch: local.dispatch,
commit: local.commit,
getters: local.getters,
state: local.state,
rootGetters: store.getters,
rootState: store.state
}, payload, cb)
/* 判断是否是Promise */
if (!isPromise(res)) {
/* 不是Promise对象的时候转化称Promise对象 */
res = Promise.resolve(res)
}
if (store._devtoolHook) {
/* 存在devtool捕获的时候触发vuex的error给devtool */
return res.catch(err => {
store._devtoolHook.emit('vuex:error', err)
throw err
})
} else {
return res
}
})
}
在注册 action 时将 actions push 到 _actions 时 进行封装（wrappedActionHandler）所以在 dispatch 触发的第一个参数中可以获取state、commit等方法。并将封装的结果 res 会被进行判断是否是 Promise，不是则会进行一层封装，将其转化成Promise 对象。
调用 dispatch 触发 action
/* 调用action的dispatch方法 */
dispatch (_type, _payload) {
// check object-style dispatch
const {
type,
payload
} = unifyObjectStyle(_type, _payload)
/* actions中取出type对应的ation */
const entry = this._actions[type]
if (!entry) {
if (process.env.NODE_ENV !== 'production') {
console.error(`[vuex] unknown action type: ${type}`)
}
return
}
/* 是数组则包装Promise形成一个新的Promise，只有一个则直接返回第0个 */
return entry.length > 1
? Promise.all(entry.map(handler => handler(payload)))
: entry[0](payload)
}
当我们调用 dispatch 方法时，vuex 会从 _actions 中取出对应的 action 函数，只有一个的时候直接返回，否则用Promise.all 将所有 action 函数的执行结果合并成一个新的 Promise 对象，并返回该 Promise 对象。
watch
/* 观察一个 getter 方法 */
watch (getter, cb, options) {
if (process.env.NODE_ENV !== 'production') {
assert(typeof getter === 'function', `store.watch only accepts a function.`)
}
return this._watcherVM.$watch(() => getter(this.state, this.getters), cb, options)
}
_watcherVM 是一个Vue的实例，所以 watch 就可以采用 Vue 内部的 watch 特性提供了一种观察数据 getter 变动的方法。
registerModule
注册动态模块，在store创建以后再注册模块的时候用该接口。
/* 注册一个动态module，当业务进行异步加载的时候，可以通过该接口进行注册动态module */
registerModule (path, rawModule) {
/* 转化称Array */
if (typeof path === 'string') path = [path]
if (process.env.NODE_ENV !== 'production') {
assert(Array.isArray(path), `module path must be a string or an Array.`)
assert(path.length > 0, 'cannot register the root module by using registerModule.')
}
/*注册*/
this._modules.register(path, rawModule)
/*初始化module*/
installModule(this, this.state, path, this._modules.get(path))
// reset store to update getters...
/* 通过vm重设store，新建Vue对象使用Vue内部的响应式实现注册state以及computed */
resetStoreVM(this, this.state)
}
unregisterModule
注销动态模块
/* 注销一个动态module */
unregisterModule (path) {
/* 转化称Array */
if (typeof path === 'string') path = [path]
if (process.env.NODE_ENV !== 'production') {
assert(Array.isArray(path), `module path must be a string or an Array.`)
}
/*注销*/
this._modules.unregister(path)
this._withCommit(() => {
/* 获取父级的state */
const parentState = getNestedState(this.state, path.slice(0, -1))
/* 从父级中删除 */
Vue.delete(parentState, path[path.length - 1])
})
/* 重置store */
resetStore(this)
}
实现方法是先从state中删除模块，然后用resetStore来重置store。
resetStore
重置 Store 中的各个属性，再重新执行 installModule 初始化模块 、 resetStoreVM 实现响应式
/* 重制store */
function resetStore (store, hot) {
store._actions = Object.create(null)
store._mutations = Object.create(null)
store._wrappedGetters = Object.create(null)
store._modulesNamespaceMap = Object.create(null)
const state = store.state
// init all modules
installModule(store, state, [], store._modules.root, true)
// reset vm
resetStoreVM(store, state, hot)
}
总结
Vuex 的设计思路和原理可以概括为以下几点：
- 单例模式：vuex 采用单例模式，将所有组件的状态存储在一个对象中。
- 状态是只读的：Vuex 中的状态是只读的，唯一改变状态的方式是提交 mutation。
- Mutation 用于同步状态：Mutation 是一个同步函数，用于更改状态。每个 mutation 都有一个字符串类型的事件类型和一个回调函数。
- Action 用于异步操作：Action 是一个异步函数，用于提交 mutation。Action 可以包含任意异步操作，并且可以通过 context 对象访问 state、commit、dispatch 等方法。
- Getter 用于派生状态：Getter 是一个计算属性，用于派生出状态。Getter 接收 state 作为第一个参数，可以接收其他 getter 作为第二个参数。
- 插件机制：vuex 提供了插件机制，允许我们在 store 上注册插件，以处理 store 中的数据变化、添加响应式属性等。
- 模块化设计：vuex 支持模块化设计，可以将 store 拆分成多个模块，每个模块都有自己的 state、mutation、action、getter。
以上就是今天的全部内容啦，你学废了吗？🤣
反正我是废了，要是一遍看不懂，那就再看一遍，多顺几遍总能学会哒😀，大家一起加油啊💪。
参考
转载自:https://juejin.cn/post/7246378293245722681