当前位置：首页 > VUE

vue store实现原理

2026-01-18 14:51:16VUE

Vuex 的实现原理

Vuex 是 Vue.js 的状态管理库，其核心原理围绕状态集中管理、响应式数据绑定和单向数据流设计。以下是关键实现机制：

核心概念与实现

State

Vuex 的状态存储基于 Vue 的响应式系统。通过 new Vue() 实例的 data 属性实现状态响应式更新。
示例代码片段：
```
this._vm = new Vue({
  data: {
    $$state: state
  }
})
```
状态变更会触发视图自动更新。

Getters

使用 Vue 的计算属性（computed）实现。通过 Object.defineProperty 缓存计算结果，依赖的状态变化时重新计算。

示例：

function registerGetter(store, getterName, getterFn) {
  Object.defineProperty(store.getters, getterName, {
    get: () => getterFn(store.state)
  })
}

Mutations

同步更新状态的唯一途径。通过提交（commit）调用，内部直接修改 state。

实现时使用发布订阅模式，存储 mutation 函数到 _mutations 对象：

store._mutations = {
  'mutationName': [function (state, payload) { /* 更新逻辑 */ }]
}

Actions

支持异步操作，通过分发（dispatch）触发。实际通过提交 mutation 间接修改状态。

内部存储到 _actions 对象，可能返回 Promise：

store._actions = {
  'actionName': [function (context, payload) { /* 异步逻辑 */ }]
}

响应式机制

依赖收集
- Vuex 利用 Vue 的响应式系统，在组件中通过 mapState 或 this.$store 访问状态时，Vue 自动追踪依赖。
派发更新
- 修改状态后，Vue 的响应式系统通知所有依赖组件重新渲染。

插件系统

Vuex 允许通过插件（plugins）扩展功能。插件是一个函数，接收 store 作为参数：

const plugin = (store) => {
  store.subscribe((mutation, state) => {
    console.log(mutation.type, mutation.payload)
  })
}

插件常用于日志记录、状态持久化等场景。

模块化实现

模块收集
- 通过 ModuleCollection 类递归注册模块，形成树状结构。
命名空间
- 开启 namespaced: true 后，自动为 mutation/action/getter 添加命名空间前缀。
局部状态
- 模块内部通过 localState 访问局部状态：
```
const localState = getNestedState(store.state, path)
```

源码关键点

Store 构造函数
- 初始化核心属性（_actions, _mutations, _wrappedGetters）。
- 调用 installModule 注册模块。
commit 与 dispatch
- commit 直接调用 mutation 函数；dispatch 返回 Promise 以支持异步链式调用。
严格模式
- 通过 watch 监听状态变化，检测是否通过 mutation 修改状态。