vuex4 和vuex3 源码差别

最新推荐文章于 2025-07-14 10:45:47 发布

原创最新推荐文章于 2025-07-14 10:45:47 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文对比了Vuex3.x和Vuex4在原理与使用上的区别，详细介绍了Vuex4如何注入Vue，包括通过`install`作为插件在`createApp`时安装，以及通过`inject`和`provide`实现组件间store的访问。同时，分析了`useStore`的实现原理，以及在Vuex4中，state是借助Vue3的`reactive` API创建响应式数据，不同于Vuex3使用`new Vue`实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuex4 和vuex3 源码差别

快速过Vuex3.x原理

1、为什么每个组件都可以通过this.$store访问到store数据？
在beforeCreate时，通过mixin的方式注入了store
在这里插入图片描述

2、为什么Vuex中的数据都是响应式的

创建store的时候调用的是new Vue,创建了一个Vue实例，相当于借用了Vue的响应式。
在这里插入图片描述

3、mapXxxx是怎么获取到store中的数据和方法的

mapXxxx只是一个语法糖，底层实现也是从$store中获取然后返回到computed / methods中。

Vuex4使用

Vuex4是怎么注入Vue的

在这里插入图片描述

Vuex是以插件的形式在Vue中使用的，在createApp时调用install安装

Store 类的install，两种实现分别为挂载到全局和组件内访问

:实现通过inject获取（全局提供）
实现this. $s t o r e 获取：将 s t o r e 挂载到全局 p r o p e r t i e s （让每一个组件实例都有一个$ store）

// Vuex4实现插件install
install (app, injectKey) {
  // 实现通过inject获取
  app.provide(injectKey || storeKey, this)
  // 实现this.$store获取
  app.config.globalProperties.$store = this
  }

useStore的实现

Vue.inject、Vue.provide

通过provide时存入的key取出store
有父级实例则取父级实例的provides，没有则取根实例的provides

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

createStore

在这里插入图片描述

可以发现Vuex4中的state是通过reactive API去创建的响应式数据，Vuex3中是通过new Vue实例
ispatch、commit的实现基本是封装了一层执行，底层也是通过store去执行
而Vuex4的响应式实现，同样是借用了Vue3的响应式API reactive

在这里插入图片描述
通过$store 是怎么获得getter的

在这里插入图片描述

const forEach = (obj, cb) => {
  Object.keys(obj).forEach((key) => {
    cb(key, obj[key], obj);
  });
};