vuex 的实现原理

一、Vuex是什么
Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1、Vuex的构成

由上图，我们可以看出Vuex有以下几个部分构成：

1）state
state是存储的单一状态，是存储的基本数据。

2）Getters
getters是store的计算属性，对state的加工，是派生出来的数据。就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。

3）Mutations
mutations提交更改数据，使用store.commit方法更改state存储的状态。（mutations同步函数）

4）Actions
actions像一个装饰器，提交mutation，而不是直接变更状态。（actions可以包含任何异步操作）

5）Module
Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。

const moduleA = {state: { ... },mutations: { ... },actions: { ... },getters: { ... }
}const moduleB = {state: { ... },mutations: { ... },actions: { ... }
}const store = new Vuex.Store({modules: {a: moduleA,b: moduleB}
})store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

6）辅助函数
Vuex提供了mapState、MapGetters、MapActions、mapMutations等辅助函数给开发在vm中处理store。

2、Vuex的使用

二、Vuex的设计思想
Vuex的设计思想，借鉴了Flux、Redux，将数据存放到全局的store，再将store挂载到每个vue实例组件中，利用Vue.js的细粒度数据响应机制来进行高效的状态更新。

看了Vuex设计思想，心里难免会有这样的疑问：

vuex的store是如何挂载注入到组件中呢？
vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢？
三、Vuex的原理解析
我们来看下vuex的源码，分析看看上面2个疑惑的问题：

疑问1：vuex的store是如何挂载注入到组件中呢？
1、在vue项目中先安装vuex，核心代码如下：

import Vuex from 'vuex';
Vue.use(vuex);// vue的插件机制

2、利用vue的插件机制，使用Vue.use(vuex)时，会调用vuex的install方法，装载vuex，install方法的代码如下：

export function install (_Vue) {if (Vue && _Vue === Vue) {if (process.env.NODE_ENV !== 'production') {console.error('[vuex] already installed. Vue.use(Vuex) should be called only once.')}return}Vue = _VueapplyMixin(Vue)
}

3、applyMixin方法使用vue 混入机制，vue的生命周期beforeCreate钩子函数前混入vuexInit方法，核心代码如下：

Vue.mixin({ beforeCreate: vuexInit });function vuexInit () {const options = this.$options// store injectionif (options.store) {this.$store = typeof options.store === 'function'? options.store(): options.store} else if (options.parent && options.parent.$store) {this.$store = options.parent.$store}
}

分析源码，我们知道了vuex是利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store。store注入过程如下图所示：

疑问2：vuex的state和getters是如何映射到各个组件实例中响应式更新状态呢？
store实现的源码在src/store.js

1、我们在源码中找到resetStoreVM核心方法：

function resetStoreVM (store, state, hot) {const oldVm = store._vm// 设置 getters 属性store.getters = {}const wrappedGetters = store._wrappedGettersconst computed = {}// 遍历 wrappedGetters 属性forEachValue(wrappedGetters, (fn, key) => {// 给 computed 对象添加属性computed[key] = partial(fn, store)// 重写 get 方法// store.getters.xx 其实是访问了store._vm[xx]，其中添加 computed 属性Object.defineProperty(store.getters, key, {get: () => store._vm[key],enumerable: true // for local getters})})const silent = Vue.config.silentVue.config.silent = true// 创建Vue实例来保存state，同时让state变成响应式// store._vm._data.$$state = store.statestore._vm = new Vue({data: {$$state: state},computed})Vue.config.silent = silent// 只能通过commit方式更改状态if (store.strict) {enableStrictMode(store)}
}

从上面源码，我们可以看出Vuex的state状态是响应式，是借助vue的data是响应式，将state存入vue实例组件的data中；Vuex的getters则是借助vue的计算属性computed实现数据实时监听。

computed计算属性监听data数据变更主要经历以下几个过程：

小结
Vuex是通过全局注入store对象，来实现组件间的状态共享。在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。

Vue组件简单常用的通信方式有以下几种：

1、父子通信：

父向子传值，通过props；子向父传值通过events ($emit)；父调用子方法通过ref；provide / inject。

2、兄弟通信：bus

3、跨级嵌套通信：bus；provide / inject等。

vuex 的实现原理相关推荐

理解vuex实现的原理
一.vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态, 这个状态管理应用包含以下几个部分: state,驱动应用的数据源: v ...
Vuex概念+实现原理
文章目录一. Vuex概念 1. Vuex是什么? 2. Vuex的具体工作: 3. Vuex 的属性包含以下6个: 二. Vuex实现原理 2-1. store是怎么注册的? 2-2. mutai ...
【笔记整理】vuex介绍和原理以及mapState与mapGetters、mapActions与mapMutations
vuex 理解Vuex 概念:专门在 Vue 中实现集中式状态(数据)管理的一个 Vue 插件,对 vue 应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组 ...
vuex 工作的原理
描述 vuex 是vue的状态管理工具,是通过全局注入store对象,来实现组件间的状态共享 vuex的构成 1)state state是存储的单一状态,是存储的基本数据. 2)Getters get ...
vuex 源码分析_Vuex源码解析
写在前面因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 可能会有理解存在偏差的地方,欢迎提issue指出,共同 ...
vue学习笔记（三）之vuex
vuex 简介 vuex的工作原理搭建vuex环境使用vuex实现求和 vuex的基本使用 vuex开发者工具 vuex的getters配置项四个map方法的使用起源使用方式 vuex的模块 ...
cookies、sessionStorage和localStorage以及vuex解释及区别
在浏览器查看 HTML4的本地存储 cookie 浏览器的缓存机制提供了可以将用户数据存储在客户端上的方式,可以利用cookie,session等跟服务端进行数据交互. 一.cookie和sessio ...
前端面试题 HTML5 CSS3(盒子模型、盒子水平垂直居中、经典布局) JS(闭包、深浅克隆、数据劫持和拦截) 算法(排序、去重、数组扁平化) Vue(双向数据绑定原理、通信方式)
前端面试题 HTML5 相关面试题 CSS3 相关面试题盒子模型盒子水平垂直居中的方案经典布局方案圣杯布局双飞翼布局 flex布局定位方式布局 css实现三角形 JS 相关面试题 8种数据 ...
1年工作经验8月份大厂面试全记录
大家好,我是若川.最近组织了源码共读活动<1个月,200+人,一起读了4周源码>,已经有超50+人提交了笔记,群里已经有超1200人,感兴趣的可以点此链接扫码加我微信 ruochuan12 ...

vuex 的实现原理

vuex 的实现原理相关推荐

最新文章

热门文章